add docs generator

.gitignore

@@ -1,2 +1,5 @@
 node_modules
-new-section
+new-section
+.eslintcache
+yarn.lock
+package-lock.json

README.md

@@ -0,0 +1,7 @@
+# Component Party
+
+Compare DX of every JS frameworks:
+
+- React
+- Vue
+- Svelte

package.json

@@ -6,6 +6,7 @@
 	"main": "index.js",
 	"scripts": {
 		"create-section": "node scripts/createSection.js",
+		"doc": "node scripts/generateDoc.js",
 		"lint": "eslint .",
 		"lint:fix": "npm run lint -- --fix",
 		"prettier": "prettier . --check",

scripts/_constants.js

@@ -0,0 +1,17 @@
+export const FRAMEWORKS = [
+	{
+		id: 'svelte',
+		title: 'Svelte',
+		ext: 'svelte'
+	},
+	{
+		id: 'react',
+		title: 'React',
+		ext: 'jsx'
+	},
+	{
+		id: 'vue3',
+		title: 'Vue 3',
+		ext: 'vue'
+	}
+];

scripts/createSection.js

@@ -1,4 +1,5 @@
 import fs from 'fs';
+import { FRAMEWORKS } from './_constants.js';
 
 function getArgs() {
 	const [componentName] = process.argv.slice(2);
@@ -12,24 +13,9 @@ const args = getArgs();
 async function main() {
 	fs.mkdirSync('new-section');
 
-	const frameworks = [
-		{
-			id: 'svelte',
-			ext: 'svelte'
-		},
-		{
-			id: 'react',
-			ext: 'jsx'
-		},
-		{
-			id: 'vue3',
-			ext: 'vue'
-		}
-	];
-
 	const componentName = args.componentName || 'Component';
 
-	for (const { id, ext } of frameworks) {
+	for (const { id, ext } of FRAMEWORKS) {
 		const dir = `new-section/${id}`;
 		fs.mkdirSync(dir);
 		fs.writeFileSync(`${dir}/${componentName}.${ext}`, '');

scripts/generateDoc.js

@@ -0,0 +1,44 @@
+import fs from 'fs';
+import { FRAMEWORKS } from './_constants.js';
+
+async function main() {
+	const srcDirs = fs.readdirSync('src');
+
+	for (const srcDir of srcDirs) {
+		const sectionDir = `src/${srcDir}`;
+		const subSectionDirs = fs.readdirSync(sectionDir).filter((path) => !path.includes('.'));
+		let fileContent = '';
+
+		fileContent += `# ${dirNameToTitle(srcDir)}\n`;
+
+		for (const subSectionDir of subSectionDirs) {
+			fileContent += `## ${dirNameToTitle(subSectionDir)}\n`;
+			const frameworkDirs = fs
+				.readdirSync(`${sectionDir}/${subSectionDir}`)
+				.filter((path) => !path.includes('.'));
+			for (const frameworkDir of frameworkDirs) {
+				fileContent += `### ${FRAMEWORKS.find((f) => f.id === frameworkDir).title}\n`;
+				const files = fs.readdirSync(`${sectionDir}/${subSectionDir}/${frameworkDir}`);
+				for (const file of files) {
+					fileContent += `\`\`\`${
+						FRAMEWORKS.find((f) => f.id === frameworkDir).ext
+					}\n${fs.readFileSync(
+						`${sectionDir}/${subSectionDir}/${frameworkDir}/${file}`
+					)}\n\`\`\`\n\n`;
+				}
+			}
+		}
+
+		fs.writeFileSync(`${sectionDir}/README.md`, fileContent, 'utf-8');
+	}
+}
+
+main().catch(console.error);
+
+function dirNameToTitle(dirName) {
+	return capitalize(dirName.split('-').splice(1).join(' '));
+}
+
+function capitalize(string) {
+	return string.charAt(0).toUpperCase() + string.slice(1);
+}

src/1-reactivity/README.md

@@ -0,0 +1,76 @@
+# Reactivity
+
+## Variable assignment
+
+### React
+
+```jsx
+import { useState } from 'react';
+
+export default function Name() {
+	const [name, setName] = useState(0);
+	setName('Jane');
+
+	console.log(name);
+}
+```
+
+### Svelte
+
+```svelte
+<script>
+    let name = "John"
+    name = "Jane"
+    console.log(name)
+</script>
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { ref } from 'vue';
+const name = ref('John');
+name.value = 'Jane';
+console.log(name.value);
+</script>
+```
+
+## Computed
+
+### React
+
+```jsx
+import { useState, useMemo } from 'react';
+
+export default function DoubleCount() {
+	const [count] = useState(0);
+	const doubleCount = useMemo(() => count * 2, [count]);
+	console.log(doubleCount);
+	return <div />;
+}
+```
+
+### Svelte
+
+```svelte
+<script>
+    let count = 10
+    $: doubleCount = count * 2
+    console.log(doubleCount)
+</script>
+
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { ref, computed } from 'vue';
+const count = ref(10);
+const doubleCount = computed(() => count.value * 2);
+console.log(doubleCount.value);
+</script>
+
+<div />
+```

src/2-templating/README.md

@@ -0,0 +1,187 @@
+# Templating
+
+## Minimal
+
+### React
+
+```jsx
+export default function HelloWorld() {
+	return <h1>Hello world</h1>;
+}
+```
+
+### Svelte
+
+```svelte
+<h1>Hello world</h1>
+```
+
+### Vue 3
+
+```vue
+<template>
+	<h1>Hello world</h1>
+</template>
+```
+
+## Styling
+
+### React
+
+```jsx
+export default function HelloWorld() {
+	// how do you declare title class ??
+
+	return (
+		<>
+			<h1 className="title">Hello world</h1>
+			<button style={{ 'font-size': '10rem' }}>I am a button</button>
+		</>
+	);
+}
+```
+
+### Svelte
+
+```svelte
+<template>
+	<h1 class="title">Hello world</h1>
+	<button style="font-size: 10rem;">I am a button</button>
+</template>
+
+<style>
+	.title {
+		color: red;
+	}
+</style>
+```
+
+### Vue 3
+
+```vue
+<template>
+	<h1 class="title">Hello world</h1>
+	<button style="font-size: 10rem">I am a button</button>
+</template>
+
+<style scoped>
+.title {
+	color: red;
+}
+</style>
+```
+
+## Loop
+
+### React
+
+```jsx
+export default function Countries() {
+	const countries = ['France', 'United States', 'Spain'];
+	return (
+		<ul>
+			{countries.map((country) => (
+				<li key={country}>{country}</li>
+			))}
+		</ul>
+	);
+}
+```
+
+### Svelte
+
+```svelte
+<script>
+    const countries = [
+		"France",
+		"United States",
+		"Spain"
+	]
+</script>
+
+<ul>
+    {#each countries as country}
+        <li>{country}</li>
+    {/each}
+</ul>
+```
+
+### Vue 3
+
+```vue
+<script setup>
+const countries = ['France', 'United States', 'Spain'];
+</script>
+
+<template>
+	<ul>
+		<li v-for="country in countries" :key="country">
+			{{ country }}
+		</li>
+	</ul>
+</template>
+```
+
+## Event click
+
+### React
+
+```jsx
+import { useState } from 'react';
+
+export default function Name() {
+	const [count, setCount] = useState(0);
+
+	function incrementCount() {
+		setCount(count + 1);
+	}
+
+	return (
+		<>
+			<p>Counter: {count}</p>
+			<button onClick={incrementCount}>+1</button>
+		</>
+	);
+}
+```
+
+### Svelte
+
+```svelte
+<script>
+    let count = 0
+
+    function incrementCount(){
+        count += 1
+    }
+</script>
+
+<p>Counter: {count}</p>
+<button on:click={incrementCount}>+1</button>
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { ref } from 'vue';
+const count = ref(0);
+
+function incrementCount() {
+	count.value = count.value + 1;
+}
+</script>
+
+<template>
+	<p>Counter: {{ count }}</p>
+	<button @click="incrementCount">+1</button>
+</template>
+```
+
+## Dom ref
+
+## Conditional
+
+## Input binding
+
+## Event modifier

src/3-lifecycle/README.md

@@ -0,0 +1,7 @@
+# Lifecycle
+
+## OnMount
+
+## OnUnmount
+
+## Watcher

src/4-component-composition/README.md

@@ -0,0 +1,13 @@
+# Component composition
+
+## Props
+
+## Event
+
+## Slot
+
+## Slot named
+
+## Slot props
+
+## Event dom forwarding

src/5-store-context/README.md

@@ -0,0 +1 @@
+# Store context

src/6-form-inputs/README.md

@@ -0,0 +1 @@
+# Form inputs

src/7-real-usecase/README.md

@@ -0,0 +1,5 @@
+# Real usecase
+
+## Todolist
+
+## Fetch