add solidjs config & reactivity+templating

config.cjs

@@ -108,6 +108,22 @@ const FRAMEWORKS = [
 			return sortedByApp;
 		},
 	},
+	{
+		id: 'solid',
+		title: 'SolidJS',
+		ext: 'jsx',
+		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((x) => x);
+		},
+	},
 ]
 
 module.exports = { FRAMEWORKS };

content/1-reactivity/1-declare-state/solid/Name.jsx

@@ -0,0 +1,7 @@
+import { createSignal } from 'solid-js';
+
+export default function Name() {
+	const [name] = createSignal('John');
+
+	return <h1>Hello {name()}</h1>;
+}

content/1-reactivity/2-update-state/solid/Name.jsx

@@ -0,0 +1,8 @@
+import { createSignal } from 'solid-js';
+
+export default function Name() {
+	const [name, setName] = createSignal('John');
+	setName('Jane');
+
+	return <h1>Hello {name()}</h1>;
+}

content/1-reactivity/3-computed-state/solid/DoubleCount.jsx

@@ -0,0 +1,8 @@
+import { createSignal } from 'solid-js';
+
+export default function DoubleCount() {
+	const [count] = createSignal(10);
+	const doubleCount = () => count() * 2;
+
+	return <div>{doubleCount()}</div>;
+}

content/2-templating/1-minimal-template/solid/HelloWorld.jsx

@@ -0,0 +1,3 @@
+export default function HelloWorld() {
+	return <h1>Hello World!</h1>;
+}

content/2-templating/2-styling/angular/cssstyle.component.html

@@ -1,2 +1,2 @@
-<h1 class="title">Hello world</h1>
+<h1 class="title">I am red<</h1>
 <button style="font-size: 10rem">I am a button</button>

content/2-templating/2-styling/react/CssStyle.jsx

@@ -1,9 +1,9 @@
-export default function HelloWorld() {
-	// how do you declare title class ??
+import './style.css';
 
+export default function CssStyle() {
 	return (
 		<>
-			<h1 className="title">Hello world</h1>
+			<h1 className="title">I am red</h1>
 			<button style={{ 'font-size': '10rem' }}>I am a button</button>
 		</>
 	);

content/2-templating/2-styling/react/style.css

@@ -0,0 +1,3 @@
+.title {
+	color: red;
+}

content/2-templating/2-styling/solid/CssStyle.jsx

@@ -0,0 +1,10 @@
+import './style.css';
+
+export default function CssStyle() {
+	return (
+		<>
+			<h1 class="title">I am red</h1>
+			<button style={{ 'font-size': '10rem' }}>I am a button</button>
+		</>
+	);
+}

content/2-templating/2-styling/solid/style.css

@@ -0,0 +1,3 @@
+.title {
+	color: red;
+}

content/2-templating/2-styling/svelte/CssStyle.svelte

@@ -1,4 +1,4 @@
-<h1 class="title">Hello world</h1>
+<h1 class="title">I am red</h1>
 <button style="font-size: 10rem;">I am a button</button>
 
 <style>

content/2-templating/2-styling/vue3/CssStyle.vue

@@ -1,10 +1,6 @@
 <template>
-  <h1 class="title">
-    Hello world
-  </h1>
-  <button style="font-size: 10rem">
-    I am a button
-  </button>
+	<h1 class="title">I am red</h1>
+	<button style="font-size: 10rem">I am a button</button>
 </template>
 
 <style scoped>

content/2-templating/3-loop/solid/Colors.jsx

@@ -0,0 +1,11 @@
+import { For } from 'solid-js';
+
+export default function Colors() {
+	const colors = ['red', 'green', 'blue'];
+
+	return (
+		<ul>
+			<For each={colors}>{(color) => <li>{color}</li>}</For>
+		</ul>
+	);
+}

content/2-templating/4-event-click/solid/Counter.jsx

@@ -0,0 +1,16 @@
+import { createSignal } from 'solid-js';
+
+export default function Counter() {
+	const [count, setCount] = createSignal(0);
+
+	function incrementCount() {
+		setCount(count() + 1);
+	}
+
+	return (
+		<>
+			<p>Counter: {count()}</p>
+			<button onClick={incrementCount}>+1</button>
+		</>
+	);
+}

content/2-templating/5-dom-ref/solid/InputFocused.jsx

@@ -0,0 +1,9 @@
+import { onMount } from 'solid-js';
+
+export default function InputFocused() {
+	let inputElement;
+
+	onMount(() => inputElement.focus());
+
+	return <input ref={inputElement} type="text" />;
+}

content/2-templating/6-conditional/solid/TrafficLight.jsx

@@ -0,0 +1,30 @@
+import { createSignal } from 'solid-js';
+
+const TRAFFIC_LIGHTS = ['red', 'orange', 'green'];
+
+export default function TrafficLight() {
+	const [lightIndex, setLightIndex] = createSignal(0);
+
+	const light = () => TRAFFIC_LIGHTS[lightIndex()];
+
+	function nextLight() {
+		if (lightIndex() + 1 > TRAFFIC_LIGHTS.length - 1) {
+			setLightIndex(0);
+		} else {
+			setLightIndex(lightIndex() + 1);
+		}
+	}
+
+	return (
+		<>
+			<button onClick={nextLight}>Next light</button>
+			<p>Light is: {light()}</p>
+			<p>
+				You must
+				{light() === 'red' && <span>STOP</span>}
+				{light() === 'orange' && <span>SLOW DOWN</span>}
+				{light() === 'green' && <span>GO</span>}
+			</p>
+		</>
+	);
+}

content/3-lifecycle/1-on-mount/solid/PageTitle.jsx

@@ -0,0 +1,11 @@
+import { createSignal, onMount } from 'solid-js';
+
+export default function PageTitle() {
+	const [pageTitle, setPageTitle] = createSignal('');
+
+	onMount(() => {
+		setPageTitle(document.title);
+	});
+
+	return <p>Page title: {pageTitle()}</p>;
+}

content/3-lifecycle/2-on-unmount/solid/Time.jsx

@@ -0,0 +1,13 @@
+import { createSignal, onCleanup } from 'solid-js';
+
+export default function Time() {
+	const [time, setTime] = createSignal(new Date().toLocaleTimeString());
+
+	const timer = setInterval(() => {
+		setTime(new Date().toLocaleTimeString());
+	}, 1000);
+
+	onCleanup(() => clearInterval(timer));
+
+	return <p>Current time: {time()}</p>;
+}

package.json

@@ -43,6 +43,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-solid": "^0.4.7",
     "eslint-plugin-svelte3": "^3.4.1",
     "eslint-plugin-vue": "^8.6.0",
     "husky": "^7.0.4",

pnpm-lock.yaml

@@ -17,6 +17,7 @@ specifiers:
   eslint-config-prettier: ^8.5.0
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-react: ^7.29.4
+  eslint-plugin-solid: ^0.4.7
   eslint-plugin-svelte3: ^3.4.1
   eslint-plugin-vue: ^8.6.0
   husky: ^7.0.4
@@ -51,6 +52,7 @@ devDependencies:
   eslint-config-prettier: 8.5.0_eslint@8.14.0
   eslint-plugin-prettier: 4.0.0_mzpligoj26dazigcet37nxg2zy
   eslint-plugin-react: 7.29.4_eslint@8.14.0
+  eslint-plugin-solid: 0.4.7_t725usgvqspm5woeqpaxbfp2qu
   eslint-plugin-svelte3: 3.4.1_ocxlrf2nkx6hb2cyi7uc5mkzg4
   eslint-plugin-vue: 8.7.1_eslint@8.14.0
   husky: 7.0.4
@@ -1995,6 +1997,24 @@ packages:
       string.prototype.matchall: 4.0.7
     dev: true
 
+  /eslint-plugin-solid/0.4.7_t725usgvqspm5woeqpaxbfp2qu:
+    resolution: {integrity: sha512-oWjW1YhhcGF6guWzdC44m/350A3l/5wgg9Gry+aWjeWpCeD2PMQT9jnjV3Sdibprjjvqe8w9db/H+oqpm3JHmg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@typescript-eslint/utils': 5.22.0_t725usgvqspm5woeqpaxbfp2qu
+      eslint: 8.14.0
+      is-html: 2.0.0
+      jsx-ast-utils: 3.3.0
+      kebab-case: 1.0.1
+      known-css-properties: 0.24.0
+      style-to-object: 0.3.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /eslint-plugin-svelte3/3.4.1_ocxlrf2nkx6hb2cyi7uc5mkzg4:
     resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==}
     engines: {node: '>=10'}
@@ -2592,6 +2612,11 @@ packages:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
     dev: true
 
+  /html-tags/3.2.0:
+    resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
+    engines: {node: '>=8'}
+    dev: true
+
   /html-void-elements/2.0.1:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
     dev: true
@@ -2777,6 +2802,13 @@ packages:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
     dev: true
 
+  /is-html/2.0.0:
+    resolution: {integrity: sha512-S+OpgB5i7wzIue/YSE5hg0e5ZYfG3hhpNh9KGl6ayJ38p7ED6wxQLd1TV91xHpcTvw90KMJ9EwN3F/iNflHBVg==}
+    engines: {node: '>=8'}
+    dependencies:
+      html-tags: 3.2.0
+    dev: true
+
   /is-interactive/2.0.0:
     resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
     engines: {node: '>=12'}
@@ -2931,6 +2963,10 @@ packages:
       object.assign: 4.1.2
     dev: true
 
+  /kebab-case/1.0.1:
+    resolution: {integrity: sha512-txPHx6nVLhv8PHGXIlAk0nYoh894SpAqGPXNvbg2hh8spvHXIah3+vT87DLoa59nKgC6scD3u3xAuRIgiMqbfQ==}
+    dev: true
+
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -2946,6 +2982,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /known-css-properties/0.24.0:
+    resolution: {integrity: sha512-RTSoaUAfLvpR357vWzAz/50Q/BmHfmE6ETSWfutT0AJiw10e6CmcdYRQJlLRd95B53D0Y2aD1jSxD3V3ySF+PA==}
+    dev: true
+
   /levn/0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}

public/framework/solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

src/components/FrameworkSwitch.svelte

@@ -1,15 +0,0 @@
-<script>
-	import c from 'classnames';
-	import FRAMEWORKS from '../frameworks';
-</script>
-
-{#each FRAMEWORKS as framework}
-	<button class="text-sm rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all mr-2" title={`Display ${framework.title}`}>
-		<div class="flex items-center space-x-1">
-			{#if framework?.img}
-				<img src={framework.img} alt={framework.id} width={20} height={20} class="inline mr-[5px] mb-0 mt-0" />
-			{/if}
-			<span>{framework.title}</span>
-		</div>
-	</button>
-{/each}

src/frameworks.js

@@ -108,4 +108,20 @@ export default [
 			return sortedByApp;
 		},
 	},
+	{
+		id: 'solid',
+		title: 'SolidJS',
+		ext: 'jsx',
+		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 === 'main.jsx'), ...(files.filter(({ fileName }) => fileName !== 'main.jsx') || [])].filter((x) => x);
+		},
+	},
 ];