feat(content): add render app > solid (matschik#157)

* feat(content): add render app > solid * fix: update Solid file sort * doc: update readme
marko-js · Feb 28, 2023 · f9509a7 · f9509a7
1 parent 92e8694
commit f9509a7
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -153,8 +153,8 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Checkbox
   - [x] Radio
   - [x] Select
-- [ ] Webapp features
-  - [ ] Render app
+- [x] Webapp features
+  - [x] Render app
   - [x] Fetch data
   - [x] Router link
   - [x] Routing

diff --git a/content/7-webapp-features/1-render-app/solid/App.jsx b/content/7-webapp-features/1-render-app/solid/App.jsx
@@ -0,0 +1,3 @@
+export default function App() {
+  return <h1>Hello world</h1>;
+}
diff --git a/content/7-webapp-features/1-render-app/solid/index.html b/content/7-webapp-features/1-render-app/solid/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>
diff --git a/content/7-webapp-features/1-render-app/solid/main.jsx b/content/7-webapp-features/1-render-app/solid/main.jsx
@@ -0,0 +1,4 @@
+import { render } from "solid-js/web";
+import App from "./App";
+
+render(() => <App />, document.getElementById("app"));
diff --git a/frameworks.mjs b/frameworks.mjs
@@ -79,7 +79,7 @@ export default [
     playgroundURL: "https://playground.solidjs.com/",
     documentationURL: "https://www.solidjs.com/",
     filesSorter(files) {
-      return sortAllFilenames(files, ["App.jsx"]);
+      return sortAllFilenames(files, ["index.html", "App.jsx"]);
     },
   },
   {