Map components to path / JSX fragment
This commit is contained in:
parent
5429df0f12
commit
9eaf89e856
2 changed files with 12 additions and 14 deletions
|
@ -1,15 +1,13 @@
|
||||||
#!/usr/bin/env ruby
|
#!/usr/bin/env ruby
|
||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
|
|
||||||
components = {
|
{
|
||||||
"react-task" => ["tasks/new", "tasks/edit"],
|
"Task" => ["tasks/new", "tasks/edit"],
|
||||||
"react-tasks" => ["/", "tasks"],
|
"Tasks" => ["/", "tasks"],
|
||||||
"react-projects" => ["projects"]
|
"Projects" => ["projects"]
|
||||||
}
|
}.each do |component, paths|
|
||||||
|
compile "/html/react.html.erb", rep: component do
|
||||||
components.each do |name, paths|
|
filter(:erb, locals: {name: "react-#{component.downcase}", src: "/js/main.js"})
|
||||||
compile "/html/react.html.erb", rep: name do
|
|
||||||
filter(:erb, locals: {name:, src: "/js/main.js"})
|
|
||||||
paths.each do |path|
|
paths.each do |path|
|
||||||
(path == "/") ? write("/index.html") : write("/#{path}/index.html")
|
(path == "/") ? write("/index.html") : write("/#{path}/index.html")
|
||||||
end
|
end
|
||||||
|
|
|
@ -7,17 +7,17 @@ import { Task } from "~/components/Task";
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
const components = {
|
const components = {
|
||||||
"react-task": () => (
|
"Task": () => (
|
||||||
<App>
|
<App>
|
||||||
<Task />
|
<Task />
|
||||||
</App>
|
</App>
|
||||||
),
|
),
|
||||||
"react-tasks": () => (
|
"Tasks": () => (
|
||||||
<App>
|
<App>
|
||||||
<Tasks />
|
<Tasks />
|
||||||
</App>
|
</App>
|
||||||
),
|
),
|
||||||
"react-projects": () => (
|
"Projects": () => (
|
||||||
<App>
|
<App>
|
||||||
<Projects />
|
<Projects />
|
||||||
</App>
|
</App>
|
||||||
|
@ -25,8 +25,8 @@ import { Task } from "~/components/Task";
|
||||||
};
|
};
|
||||||
const ents = Object.entries(components);
|
const ents = Object.entries(components);
|
||||||
for (let i = 0; i < ents.length; i++) {
|
for (let i = 0; i < ents.length; i++) {
|
||||||
const [name, getJSX] = ents[i];
|
const [component, getJSX] = ents[i];
|
||||||
const root = document.querySelector(`.${name}`);
|
const root = document.querySelector(`.react-${component.toLowerCase()}`);
|
||||||
if (root) {
|
if (root) {
|
||||||
ReactDOM.createRoot(root).render(getJSX());
|
ReactDOM.createRoot(root).render(getJSX());
|
||||||
break;
|
break;
|
||||||
|
|
Loading…
Reference in a new issue