Add Web App Features > Render app (#140)

* fix(lit): remove all Lit "index.html" files

* feat(content): add webapp features > render app

* feat(content): add render app > svelte example

* feat(content): add render app > alpine example

* feat(fmw): add generic filename sorter

* fix(content): fix missing snippet blocks

* build(git): add build progress to precommit hook

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint-staged
+pnpm build:progress && git add README.md && pnpm lint-staged

README.md

@@ -1,225 +1,220 @@
-![Component Party 🎉](.github/banner.webp)
+![Component Party 🎉](.github/banner.webp)> Web component JS frameworks quick overview by their syntax and features**Website: <https://component-party.dev>**## 🤔 Why?Many JS developers don't have a good overview of every existing JS framework with their own syntax and features.
+How do we solve this? Developers love having framework overview by examples. It's a quick introduction before going deeper.## 🔥 Progression<details>
 
-> Web component JS frameworks quick overview by their syntax and features
+<summary>
+<img width="18" height="18" src="public/framework/svelte.svg" />
+<b>Svelte</b>
+<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-**Website: <https://component-party.dev>**
-
-## 🤔 Why?
-
-Many JS developers don't have a good overview of every existing JS framework with their own syntax and features.
-How do we solve this? Developers love having framework overview by examples. It's a quick introduction before going deeper.
-
-## 🔥 Progression
-
-<details>
-        <summary>
-            <img width="18" height="18" src="public/framework/svelte.svg" />
-            <b>Svelte</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
-
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[x] Webapp features
+  - \[x] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/react.svg" />
             <b>React</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 2</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 3</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/angular.svg" />
             <b>Angular</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/solid.svg" />
             <b>SolidJS</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
@@ -227,69 +222,71 @@ How do we solve this? Developers love having framework overview by examples. It'
             <b>Lit</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[x] Webapp features
+  - \[x] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/ember.svg" />
             <b>Ember</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
@@ -297,132 +294,113 @@ How do we solve this? Developers love having framework overview by examples. It'
             <b>Alpine</b>
             <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[x] Webapp features
+  - \[x] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/qwik.svg" />
             <b>Qwik</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
 </details><details>
         <summary>
             <img width="18" height="18" src="public/framework/aurelia.svg" />
             <b>Aurelia 1</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
-- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
-- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
-- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
-- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [x] Webapp features
-  - [x] Fetch data
-  - [x] Router link
-  - [x] Routing
+- \[x] Reactivity
+  - \[x] Declare state
+  - \[x] Update state
+  - \[x] Computed state
+- \[x] Templating
+  - \[x] Minimal template
+  - \[x] Styling
+  - \[x] Loop
+  - \[x] Event click
+  - \[x] Dom ref
+  - \[x] Conditional
+- \[x] Lifecycle
+  - \[x] On mount
+  - \[x] On unmount
+- \[x] Component composition
+  - \[x] Props
+  - \[x] Emit to parent
+  - \[x] Slot
+  - \[x] Slot fallback
+- \[x] Form input
+  - \[x] Input text
+  - \[x] Checkbox
+  - \[x] Radio
+  - \[x] Select
+- \[ ] Webapp features
+  - \[ ] Render app
+  - \[x] Fetch data
+  - \[x] Router link
+  - \[x] Routing
 
-</details>
-
-## 🤝 Contributing
-
-This site is built with [Astro](https://docs.astro.build). Site content is written in Markdown format located in `content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
-
-For local development, [pnpm](https://pnpm.io/) is preferred as package manager:
-
-```bash
+</details>## 🤝 ContributingThis site is built with [Astro](https://docs.astro.build). Site content is written in Markdown format located in `content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.For local development, [pnpm](https://pnpm.io/) is preferred as package manager:```bash
 pnpm i
 pnpm run dev
-```
-
-This project requires Node.js to be `v14.0.0` or higher, because we use new JavaScript features in our code, such as optional chaining.
-
-### Add a framework
-
-1.  Fork the project and create a new branch
+```This project requires Node.js to be `v14.0.0` or higher, because we use new JavaScript features in our code, such as optional chaining.### Add a framework1.  Fork the project and create a new branch
 2.  Add the new framework SVG logo in `public/framework`
 3.  Install the ESLint plugin associated to the framework
-4.  In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration
-
-## 🧑‍💻 Contributors
-
-This project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)].
-[![Contributors](https://opencollective.com/component-party/contributors.svg?width=890&button=false)](https://github.com/matschik/component-party/graphs/contributors)
-
-## ⚖️ License
-
-MIT. Made with 💖
+4.  In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration## 🧑‍💻 ContributorsThis project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)].
+[![Contributors](https://opencollective.com/component-party/contributors.svg?width=890\&button=false)](https://github.com/matschik/component-party/graphs/contributors)## ⚖️ LicenseMIT. Made with 💖

build/generateContentVitePlugin.js

@@ -21,7 +21,10 @@ export default function pluginGenerateFrameworkContent() {
     buildIsRunning = true;
     logInfo("Generating framework content files...");
     const contentDirHash =
-      (await hashElement("content")).hash + (await hashElement("build")).hash;
+      (await hashElement("content")).hash +
+      (await hashElement("build")).hash +
+      (await hashElement("frameworks.mjs")).hash;
+
     const contentDirLastHash = await contentDirFsCache.get("contentDirHash");
     if (contentDirHash !== contentDirLastHash) {
       await generateContent();
@@ -35,7 +38,7 @@ export default function pluginGenerateFrameworkContent() {
 
   let fsContentWatcher;
   if (process.env.NODE_ENV === "development") {
-    fsContentWatcher = chokidar.watch("content").on("change", build);
+    fsContentWatcher = chokidar.watch(["content"]).on("change", build);
   }
 
   return {

build/lib/generateContent.js

@@ -65,7 +65,7 @@ export default async function generateContent() {
       });
 
       const frameworksDirPath = path.join(snippetsDirPath, snippetDirName);
-      const frameworkIds = await fs.readdir(frameworksDirPath);
+      const frameworkIds = FRAMEWORKS.map(({ id }) => id);
 
       await Promise.all(
         frameworkIds.map(async (frameworkId) => {
@@ -79,6 +79,10 @@ export default async function generateContent() {
           };
 
           const codeFilesDirPath = path.join(frameworksDirPath, frameworkId);
+          if (!(await pathExists(codeFilesDirPath))) {
+            byFrameworkId[frameworkId].push(frameworkSnippet);
+            return;
+          }
           const codeFileNames = await fs.readdir(codeFilesDirPath);
 
           for (const codeFileName of codeFileNames) {

content/1-reactivity/1-declare-state/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./name.js"></script>
-</head>
-<body>
-  <x-name></x-name>
-</body>

content/1-reactivity/2-update-state/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./name.js"></script>
-</head>
-<body>
-  <x-name></x-name>
-</body>

content/1-reactivity/3-computed-state/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./double-count.js"></script>
-</head>
-<body>
-  <double-count></double-count>
-</body>

content/2-templating/1-minimal-template/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./hello-world.js"></script>
-</head>
-<body>
-  <hello-world></hello-world>
-</body>

content/2-templating/2-styling/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./css-style.js"></script>
-</head>
-<body>
-  <css-style></css-style>
-</body>

content/2-templating/3-loop/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./colors-list.js"></script>
-</head>
-<body>
-  <colors-list></colors-list>
-</body>

content/2-templating/4-event-click/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./x-counter.js"></script>
-</head>
-<body>
-  <x-counter></x-counter>
-</body>

content/2-templating/5-dom-ref/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./input-focused.js"></script>
-</head>
-<body>
-  <input-focused></input-focused>
-</body>

content/2-templating/6-conditional/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./traffic-light.js"></script>
-</head>
-<body>
-  <traffic-light></traffic-light>
-</body>

content/3-lifecycle/1-on-mount/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./page-title.js"></script>
-</head>
-<body>
-  <page-title></page-title>
-</body>

content/3-lifecycle/2-on-unmount/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./x-time.js"></script>
-</head>
-<body>
-  <x-time></x-time>
-</body>

content/4-component-composition/1-props/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./x-app.js"></script>
-</head>
-<body>
-  <x-app></x-app>
-</body>

content/4-component-composition/2-emit-to-parent/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./x-app.js"></script>
-</head>
-<body>
-  <x-app></x-app>
-</body>

content/4-component-composition/3-slot/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./x-app.js"></script>
-</head>
-<body>
-  <x-app></x-app>
-</body>

content/4-component-composition/4-slot-fallback/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./x-app.js"></script>
-</head>
-<body>
-  <x-app></x-app>
-</body>

content/6-form-input/1-input-text/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./input-hello.js"></script>
-</head>
-<body>
-  <input-hello></input-hello>
-</body>

content/6-form-input/2-checkbox/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./is-available.js"></script>
-</head>
-<body>
-  <is-available></is-available>
-</body>

content/6-form-input/3-radio/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./pick-pill.js"></script>
-</head>
-<body>
-  <pick-pill></pick-pill>
-</body>

content/6-form-input/4-select/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./color-select.js"></script>
-</head>
-<body>
-  <color-select></color-select>
-</body>

content/7-webapp-features/1-fetch-data/lit/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./x-app.js"></script>
-</head>
-<body>
-  <x-app></x-app>
-</body>

content/7-webapp-features/1-render-app/alpine/index.html

@@ -0,0 +1 @@
+<h1>Hello world</h1>

content/7-webapp-features/1-render-app/lit/app.js

@@ -0,0 +1,9 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("x-app")
+export class XApp extends LitElement {
+  render() {
+    return html`<h1>Hello world</h1>`;
+  }
+}

content/7-webapp-features/1-render-app/lit/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="./app.js"></script>
+  </head>
+
+  <body>
+    <x-app />
+  </body>
+</html>

content/7-webapp-features/1-render-app/svelte/App.svelte

@@ -0,0 +1 @@
+<h1>Hello world</h1>

content/7-webapp-features/1-render-app/svelte/app.js

@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.getElementById("app"),
+});
+
+export default app;

content/7-webapp-features/1-render-app/svelte/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>

content/7-webapp-features/2-fetch-data/aurelia1/app.ts

@@ -1,9 +1,9 @@
 import { autoinject, computedFrom } from "aurelia-framework";
-import { UseFetchUsers } from "./use-fetch-users";
+import { UseFetchUsers } from "./UseFetchUsers";
 
 @autoinject()
 export class App {
-  constructor(private useFetchUsers: UseFetchUsers) {}
+  constructor(private useFetchUsers: UseFetchUsers) { }
 
   attached() {
     this.useFetchUsers.fetchData();

content/7-webapp-features/2-router-link/aurelia1/router-link.md

@@ -1,16 +0,0 @@
-Using RouterConfiguration -> options.pushState = false
-
-See http://aurelia.io/docs/tutorials/creating-a-contact-manager#building-the-application-shell
-
-```html
-<template>
-  <ul>
-    <li>
-      <a routerLink="/#/home">Home</a>
-    </li>
-    <li>
-      <a routerLink="/#/about">About</a>
-    </li>
-  </ul>
-</template>
-```

content/7-webapp-features/3-router-link/aurelia1/router-link.md

@@ -0,0 +1,16 @@
+Using `RouterConfiguration` with `options.pushState = false`
+
+See [Building the Application Shell](http://aurelia.io/docs/tutorials/creating-a-contact-manager#building-the-application-shell)
+
+```html
+<template>
+  <ul>
+    <li>
+      <a routerLink="/#/home">Home</a>
+    </li>
+    <li>
+      <a routerLink="/#/about">About</a>
+    </li>
+  </ul>
+</template>
+```

frameworks.mjs

@@ -1,3 +1,13 @@
+function sortAllFilenames(files, filenamesSorted) {
+  return [
+    ...filenamesSorted.map((filename) =>
+      files.find(({ fileName }) => fileName === filename)
+    ),
+    ...(files.filter(({ fileName }) => !filenamesSorted.includes(fileName)) ||
+      []),
+  ].filter(Boolean);
+}
+
 export default [
   {
     id: "svelte",
@@ -11,10 +21,7 @@ export default [
     playgroundURL: "https://svelte.dev/repl",
     documentationURL: "https://svelte.dev/",
     filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "App.svelte"),
-        ...(files.filter(({ fileName }) => fileName !== "App.svelte") || []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, ["index.html", "app.js", "App.svelte"]);
     },
   },
   {
@@ -37,30 +44,7 @@ export default [
     playgroundURL: "https://codesandbox.io/s/mystifying-goldberg-6wx04b",
     documentationURL: "https://reactjs.org/docs/getting-started.html",
     filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "App.jsx"),
-        ...(files.filter(({ fileName }) => fileName !== "App.jsx") || []),
-      ].filter(Boolean);
-    },
-  },
-  {
-    id: "vue2",
-    title: "Vue 2",
-    img: "framework/vue.svg",
-    eslint: {
-      files: ["**/vue2/*.vue"],
-      extends: ["eslint:recommended", "plugin:vue/recommended"],
-      rules: {
-        "vue/multi-word-component-names": "off",
-      },
-    },
-    playgroundURL: "",
-    documentationURL: "https://v2.vuejs.org",
-    filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "App.vue"),
-        ...(files.filter(({ fileName }) => fileName !== "App.vue") || []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, ["App.jsx"]);
     },
   },
   {
@@ -80,10 +64,50 @@ export default [
     playgroundURL: "https://sfc.vuejs.org",
     documentationURL: "https://vuejs.org/guide",
     filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "App.vue"),
-        ...(files.filter(({ fileName }) => fileName !== "App.vue") || []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, ["index.html", "App.vue"]);
+    },
+  },
+  {
+    id: "solid",
+    title: "SolidJS",
+    img: "framework/solid.svg",
+    eslint: {
+      files: ["**/solid/*.jsx"],
+      plugins: ["solid"],
+      extends: ["eslint:recommended", "plugin:solid/recommended"],
+    },
+    playgroundURL: "https://playground.solidjs.com/",
+    documentationURL: "https://www.solidjs.com/",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["App.jsx"]);
+    },
+  },
+  {
+    id: "qwik",
+    title: "Qwik",
+    img: "framework/qwik.svg",
+    eslint: {
+      env: {
+        browser: true,
+        es2021: true,
+        node: true,
+      },
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      files: ["**/qwik/**"],
+      extends: ["eslint:recommended", "plugin:qwik/recommended"],
+      rules: {
+        "qwik/valid-lexical-scope": "off",
+      },
+    },
+    playgroundURL: "https://qwik.builder.io/playground",
+    documentationURL: "https://qwik.builder.io/docs/overview",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["App.tsx"]);
     },
   },
   {
@@ -131,37 +155,12 @@ export default [
     playgroundURL: "https://codesandbox.io/s/angular",
     documentationURL: "https://angular.io/docs",
     filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "app.module.ts"),
-        files.find(({ fileName }) => fileName === "app.component.ts"),
-        files.find(({ fileName }) => fileName === "app.component.html"),
-        ...(files.filter(
-          ({ fileName }) =>
-            ![
-              "app.module.ts",
-              "app.component.ts",
-              "app.component.html",
-            ].includes(fileName)
-        ) || []),
-      ].filter(Boolean);
-    },
-  },
-  {
-    id: "solid",
-    title: "SolidJS",
-    img: "framework/solid.svg",
-    eslint: {
-      files: ["**/solid/*.jsx"],
-      plugins: ["solid"],
-      extends: ["eslint:recommended", "plugin:solid/recommended"],
-    },
-    playgroundURL: "https://playground.solidjs.com/",
-    documentationURL: "https://www.solidjs.com/",
-    filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "App.jsx"),
-        ...(files.filter(({ fileName }) => fileName !== "App.jsx") || []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, [
+        "index.html",
+        "app.module.ts",
+        "app.component.ts",
+        "app.component.html",
+      ]);
     },
   },
   {
@@ -177,13 +176,24 @@ export default [
     playgroundURL: "https://lit.dev/playground",
     documentationURL: "https://lit.dev",
     filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "index.html"),
-        files.find(({ fileName }) => fileName === "x-app.js"),
-        ...(files.filter(
-          ({ fileName }) => !["index.html", "x-app.js"].includes(fileName)
-        ) || []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, ["index.html", "x-app.js"]);
+    },
+  },
+  {
+    id: "vue2",
+    title: "Vue 2",
+    img: "framework/vue.svg",
+    eslint: {
+      files: ["**/vue2/*.vue"],
+      extends: ["eslint:recommended", "plugin:vue/recommended"],
+      rules: {
+        "vue/multi-word-component-names": "off",
+      },
+    },
+    playgroundURL: "",
+    documentationURL: "https://v2.vuejs.org",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["index.html", "App.vue"]);
     },
   },
   {
@@ -199,13 +209,7 @@ export default [
     playgroundURL: "https://ember-twiddle.com",
     documentationURL: "https://emberjs.com",
     filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "app.hbs"),
-        files.find(({ fileName }) => fileName === "app.js"),
-        ...(files.filter(
-          ({ fileName }) => !["app.hbs", "app.js"].includes(fileName)
-        ) || []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, ["index.html", "app.hbs", "app.js"]);
     },
   },
   {
@@ -219,39 +223,7 @@ export default [
     playgroundURL: "https://codesandbox.io/s/7br3q8",
     documentationURL: "https://alpinejs.dev/start-here",
     filesSorter(files) {
-      return files;
-    },
-  },
-  {
-    id: "qwik",
-    title: "Qwik",
-    img: "framework/qwik.svg",
-    eslint: {
-      env: {
-        browser: true,
-        es2021: true,
-        node: true,
-      },
-      parser: "@typescript-eslint/parser",
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      files: ["**/qwik/**"],
-      extends: ["eslint:recommended", "plugin:qwik/recommended"],
-      rules: {
-        "qwik/valid-lexical-scope": "off",
-      },
-    },
-    playgroundURL: "https://qwik.builder.io/playground",
-    documentationURL: "https://qwik.builder.io/docs/overview",
-    filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "App.tsx"),
-        ...(files.filter(({ fileName }) => !["App.tsx"].includes(fileName)) ||
-          []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, ["index.html"]);
     },
   },
   {
@@ -276,13 +248,7 @@ export default [
     playgroundURL: "https://codesandbox.io/s/ppmy26opw7",
     documentationURL: "http://aurelia.io/docs/",
     filesSorter(files) {
-      return [
-        files.find(({ fileName }) => fileName === "app.html"),
-        files.find(({ fileName }) => fileName === "app.ts"),
-        ...(files.filter(
-          ({ fileName }) => !["app.html", "app.ts"].includes(fileName)
-        ) || []),
-      ].filter(Boolean);
+      return sortAllFilenames(files, ["app.html", "app.ts"]);
     },
   },
 ];

jsconfig.json

@@ -23,7 +23,8 @@
      * Typecheck JS in `.svelte` and `.js` files by default.
      * Disable this if you'd like to use dynamic types.
      */
-    "checkJs": true
+    "checkJs": true,
+    "experimentalDecorators": true
   },
   /**
    * Use global.d.ts instead of compilerOptions.types

package.json

@@ -33,6 +33,8 @@
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
     "@tailwindcss/typography": "^0.5.8",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "aurelia-framework": "^1.4.1",
     "autoprefixer": "^10.4.13",
     "chokidar": "^3.5.3",
     "codesandbox": "^2.2.3",
@@ -65,6 +67,7 @@
     "svelte": "^3.55.0",
     "svelte-preprocess": "^5.0.0",
     "tailwindcss": "^3.2.4",
+    "tslib": "^2.4.1",
     "typescript": "^4.9.4",
     "unified": "^10.1.2",
     "vite": "^4.0.4",

pnpm-lock.yaml

@@ -12,7 +12,9 @@ specifiers:
   '@sveltejs/vite-plugin-svelte': ^2.0.2
   '@tailwindcss/typography': ^0.5.8
   '@typescript-eslint/eslint-plugin': ^5.48.0
+  '@typescript-eslint/parser': ^5.48.0
   '@veljs/svelte': ^0.1.11
+  aurelia-framework: ^1.4.1
   autoprefixer: ^10.4.13
   chokidar: ^3.5.3
   classnames: ^2.3.2
@@ -47,6 +49,7 @@ specifiers:
   svelte: ^3.55.0
   svelte-preprocess: ^5.0.0
   tailwindcss: ^3.2.4
+  tslib: ^2.4.1
   typescript: ^4.9.4
   unified: ^10.1.2
   vite: ^4.0.4
@@ -69,7 +72,9 @@ devDependencies:
   '@stefanprobst/remark-shiki': 2.2.0_shiki@0.12.1
   '@sveltejs/vite-plugin-svelte': 2.0.2_svelte@3.55.0+vite@4.0.4
   '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
-  '@typescript-eslint/eslint-plugin': 5.48.0_iukboom6ndih5an6iafl45j2fe
+  '@typescript-eslint/eslint-plugin': 5.48.0_k73wpmdolxikpyqun3p36akaaq
+  '@typescript-eslint/parser': 5.48.0_iukboom6ndih5an6iafl45j2fe
+  aurelia-framework: 1.4.1
   autoprefixer: 10.4.13_postcss@8.4.20
   chokidar: 3.5.3
   codesandbox: 2.2.3
@@ -102,6 +107,7 @@ devDependencies:
   svelte: 3.55.0
   svelte-preprocess: 5.0.0_qgvpk5c7cooidsspltf2bmwgni
   tailwindcss: 3.2.4_postcss@8.4.20
+  tslib: 2.4.1
   typescript: 4.9.4
   unified: 10.1.2
   vite: 4.0.4
@@ -958,7 +964,7 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.48.0_iukboom6ndih5an6iafl45j2fe:
+  /@typescript-eslint/eslint-plugin/5.48.0_k73wpmdolxikpyqun3p36akaaq:
     resolution: {integrity: sha512-SVLafp0NXpoJY7ut6VFVUU9I+YeFsDzeQwtK0WZ+xbRN3mtxJ08je+6Oi2N89qDn087COdO0u3blKZNv9VetRQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -969,6 +975,7 @@ packages:
       typescript:
         optional: true
     dependencies:
+      '@typescript-eslint/parser': 5.48.0_iukboom6ndih5an6iafl45j2fe
       '@typescript-eslint/scope-manager': 5.48.0
       '@typescript-eslint/type-utils': 5.48.0_iukboom6ndih5an6iafl45j2fe
       '@typescript-eslint/utils': 5.48.0_iukboom6ndih5an6iafl45j2fe
@@ -984,6 +991,26 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/parser/5.48.0_iukboom6ndih5an6iafl45j2fe:
+    resolution: {integrity: sha512-1mxNA8qfgxX8kBvRDIHEzrRGrKHQfQlbW6iHyfHYS0Q4X1af+S6mkLNtgCOsGVl8+/LUPrqdHMssAemkrQ01qg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.48.0
+      '@typescript-eslint/types': 5.48.0
+      '@typescript-eslint/typescript-estree': 5.48.0_typescript@4.9.4
+      debug: 4.3.4
+      eslint: 8.31.0
+      typescript: 4.9.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/scope-manager/5.44.0:
     resolution: {integrity: sha512-2pKml57KusI0LAhgLKae9kwWeITZ7IsZs77YxyNyIVOwQ1kToyXRaJLl+uDEXzMN5hnobKUOo2gKntK9H1YL8g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1472,6 +1499,80 @@ packages:
     resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
     dev: true
 
+  /aurelia-binding/2.5.4:
+    resolution: {integrity: sha512-tYhYCFvQne+chO3p8KntCWj0r8oCXiCOGQ0yFbthHDBpjjTA4QlBwpGQ8nlGoGDKj7n4PoobeIjN3lEDKgKUyw==}
+    dependencies:
+      aurelia-logging: 1.5.2
+      aurelia-metadata: 1.0.7
+      aurelia-pal: 1.8.2
+      aurelia-task-queue: 1.3.3
+    dev: true
+
+  /aurelia-dependency-injection/1.5.2:
+    resolution: {integrity: sha512-LnKgpXzKuG2A/YPGeg5OOw8zvkbvDBMRJA9QDCjZlxymsPI98dwggNSQHI8UK+hTIBqOmjjRxqdMoeROo2Gpbw==}
+    dependencies:
+      aurelia-metadata: 1.0.7
+      aurelia-pal: 1.8.2
+    dev: true
+
+  /aurelia-framework/1.4.1:
+    resolution: {integrity: sha512-oFnJyqqIDk2Kk7iSy2YNm2MNQMbTVEiPpa9q0oGfDLclqUgv+L05rnkEW9vEpVTUMV8gmOTxIrDidNICrDT7HA==}
+    dependencies:
+      aurelia-binding: 2.5.4
+      aurelia-dependency-injection: 1.5.2
+      aurelia-loader: 1.0.2
+      aurelia-logging: 1.5.2
+      aurelia-metadata: 1.0.7
+      aurelia-pal: 1.8.2
+      aurelia-path: 1.1.7
+      aurelia-task-queue: 1.3.3
+      aurelia-templating: 1.11.1
+    dev: true
+
+  /aurelia-loader/1.0.2:
+    resolution: {integrity: sha512-3owEe5Zsk8cIJG+zcxN6gzqUr2z2c+FKhtrL49e1j8vE4ccQQjXg+tvKFnfBVf3pwma6A474WsdK8poYhoVZyA==}
+    dependencies:
+      aurelia-metadata: 1.0.7
+      aurelia-path: 1.1.7
+    dev: true
+
+  /aurelia-logging/1.5.2:
+    resolution: {integrity: sha512-R0UdpGYBNSosBZ9WefmoIpgr36szFwQrRk2pbblhI+Vx911dUEEW85QXb6BRKVAP1ykz52Fuq8lCZxR6UupQXA==}
+    dev: true
+
+  /aurelia-metadata/1.0.7:
+    resolution: {integrity: sha512-6Q3VV5VvCRjvJyICESwCNSWLkaYml9PAxHo5SjzVv+HNmvFtQRKRazczwECbTD6IWiE+O90+PmamPy4Ac2YnTA==}
+    dependencies:
+      aurelia-pal: 1.8.2
+    dev: true
+
+  /aurelia-pal/1.8.2:
+    resolution: {integrity: sha512-6erozUK5aaD88PvThs/L87kLsqxqPaBU59PGECr36v9yezhve0BHqpKgbtJ8haHJSiH80K9lsJtXfefedS/3sw==}
+    dev: true
+
+  /aurelia-path/1.1.7:
+    resolution: {integrity: sha512-D6/Tz8jE8b2+Y8Pt6P/fxF6xfJGef+TA6YEljzo1kEzyzbxIvwfqc7pK6i/XGY3LowlumPqrhxkfMjPxLpFIcA==}
+    dev: true
+
+  /aurelia-task-queue/1.3.3:
+    resolution: {integrity: sha512-ua3J2YO+cZgpn1MqxPlanSDXG4SB0BXotxYDW1iL5f6AsoEvJ3BycZJYw/N9hMQKmWniOeaBr7wGQ+KDiZFywQ==}
+    dependencies:
+      aurelia-pal: 1.8.2
+    dev: true
+
+  /aurelia-templating/1.11.1:
+    resolution: {integrity: sha512-7Zrb/yvnIYBIlqGaLXIiBsmWMoFwo3SSoxyoucqWe/M80YpR4LJaTEKoZxhZZI6x9pU+tlFOBkwd/sA1JqPR8w==}
+    dependencies:
+      aurelia-binding: 2.5.4
+      aurelia-dependency-injection: 1.5.2
+      aurelia-loader: 1.0.2
+      aurelia-logging: 1.5.2
+      aurelia-metadata: 1.0.7
+      aurelia-pal: 1.8.2
+      aurelia-path: 1.1.7
+      aurelia-task-queue: 1.3.3
+    dev: true
+
   /autoprefixer/10.4.13_postcss@8.4.20:
     resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
     engines: {node: ^10 || ^12 || >=14}

scripts/generateReadMeProgress.js

@@ -4,6 +4,7 @@ import { packageDirectory } from "pkg-dir";
 import nodePath from "node:path";
 import kebabCase from "lodash.kebabcase";
 import FRAMEWORKS from "../frameworks.mjs";
+import prettier from "prettier";
 
 function removeMarkdownHeadingContent(
   content,
@@ -165,6 +166,9 @@ ${list}
 
   newContent = newContent.replace("{{progression}}", progressionContent);
 
-  await fs.writeFile("README.md", newContent);
+  await fs.writeFile(
+    "README.md",
+    prettier.format(newContent, { parser: "markdown" })
+  );
 }
 main().catch(console.error);

src/App.svelte

@@ -280,9 +280,16 @@
                                       Missing snippet
                                     </span>
                                     <span
-                                      class="block text-lg mt-1 font-semibold"
+                                      class="block text-lg mt-1 font-semibold space-x-1"
                                     >
-                                      Help us to improve Component Party 🎉
+                                      <span>
+                                        Help us to improve Component Party
+                                      </span>
+                                      <img
+                                        src="/popper.svg"
+                                        alt="logo"
+                                        class="w-5 h-5 m-0 inline-block"
+                                      />
                                     </span>
                                   </div>
                                   <div class="mt-6 flex justify-center">

tsconfig.app.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": ["es2018", "dom"],
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}