add global doc generator

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022-present, Mathieu Schimmerling
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,7 +1,281 @@
 # Component Party
 
-Compare DX of every JS frameworks:
+## 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 />
+
+```
+
+
+## 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
+
+## Lifecycle
+### OnMount
+### OnUnmount
+### Watcher
+
+## Component composition
+### Props
+### Event
+### Slot
+### Slot named
+### Slot props
+### Event dom forwarding
+
+## Store context
+
+## Form inputs
+
+## Real usecase
+### Todolist
+### Fetch
 
-- React
-- Vue
-- Svelte

scripts/generateDoc.js

@@ -4,6 +4,8 @@ import { FRAMEWORKS } from './_constants.js';
 async function main() {
 	const srcDirs = fs.readdirSync('src');
 
+	let rootReadmeContent = '# Component Party\n\n';
+
 	for (const srcDir of srcDirs) {
 		const sectionDir = `src/${srcDir}`;
 		const subSectionDirs = fs.readdirSync(sectionDir).filter((path) => !path.includes('.'));
@@ -30,7 +32,11 @@ async function main() {
 		}
 
 		fs.writeFileSync(`${sectionDir}/README.md`, fileContent, 'utf-8');
+
+		rootReadmeContent += `${fileContent.split("\n").map(line => line.startsWith("#") ? `#${line}` : `${line}`).join("\n")}\n`;
 	}
+
+	fs.writeFileSync(`README.md`, rootReadmeContent, 'utf-8');
 }
 
 main().catch(console.error);

src/1-reactivity/README.md

@@ -1,9 +1,6 @@
 # Reactivity
-
 ## Variable assignment
-
 ### React
-
 ```jsx
 import { useState } from 'react';
 
@@ -13,10 +10,10 @@ export default function Name() {
 
 	console.log(name);
 }
+
 ```
 
 ### Svelte
-
 ```svelte
 <script>
     let name = "John"
@@ -26,7 +23,6 @@ export default function Name() {
 ```
 
 ### Vue 3
-
 ```vue
 <script setup>
 import { ref } from 'vue';
@@ -34,12 +30,11 @@ const name = ref('John');
 name.value = 'Jane';
 console.log(name.value);
 </script>
+
 ```
 
 ## Computed
-
 ### React
-
 ```jsx
 import { useState, useMemo } from 'react';
 
@@ -49,10 +44,10 @@ export default function DoubleCount() {
 	console.log(doubleCount);
 	return <div />;
 }
+
 ```
 
 ### Svelte
-
 ```svelte
 <script>
     let count = 10
@@ -63,7 +58,6 @@ export default function DoubleCount() {
 ```
 
 ### Vue 3
-
 ```vue
 <script setup>
 import { ref, computed } from 'vue';
@@ -73,4 +67,6 @@ console.log(doubleCount.value);
 </script>
 
 <div />
+
 ```
+

src/2-templating/README.md

@@ -1,33 +1,28 @@
 # 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>
+  <h1>Hello world</h1>
 </template>
+
 ```
 
 ## Styling
-
 ### React
-
 ```jsx
 export default function HelloWorld() {
 	// how do you declare title class ??
@@ -39,10 +34,10 @@ export default function HelloWorld() {
 		</>
 	);
 }
+
 ```
 
 ### Svelte
-
 ```svelte
 <template>
 	<h1 class="title">Hello world</h1>
@@ -57,11 +52,14 @@ export default function HelloWorld() {
 ```
 
 ### Vue 3
-
 ```vue
 <template>
-	<h1 class="title">Hello world</h1>
-	<button style="font-size: 10rem">I am a button</button>
+  <h1 class="title">
+    Hello world
+  </h1>
+  <button style="font-size: 10rem">
+    I am a button
+  </button>
 </template>
 
 <style scoped>
@@ -69,12 +67,11 @@ export default function HelloWorld() {
 	color: red;
 }
 </style>
+
 ```
 
 ## Loop
-
 ### React
-
 ```jsx
 export default function Countries() {
 	const countries = ['France', 'United States', 'Spain'];
@@ -86,10 +83,10 @@ export default function Countries() {
 		</ul>
 	);
 }
+
 ```
 
 ### Svelte
-
 ```svelte
 <script>
     const countries = [
@@ -107,25 +104,26 @@ export default function Countries() {
 ```
 
 ### 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>
+  <ul>
+    <li
+      v-for="country in countries"
+      :key="country"
+    >
+      {{ country }}
+    </li>
+  </ul>
 </template>
+
 ```
 
 ## Event click
-
 ### React
-
 ```jsx
 import { useState } from 'react';
 
@@ -143,10 +141,10 @@ export default function Name() {
 		</>
 	);
 }
+
 ```
 
 ### Svelte
-
 ```svelte
 <script>
     let count = 0
@@ -161,7 +159,6 @@ export default function Name() {
 ```
 
 ### Vue 3
-
 ```vue
 <script setup>
 import { ref } from 'vue';
@@ -173,15 +170,15 @@ function incrementCount() {
 </script>
 
 <template>
-	<p>Counter: {{ count }}</p>
-	<button @click="incrementCount">+1</button>
+  <p>Counter: {{ count }}</p>
+  <button @click="incrementCount">
+    +1
+  </button>
 </template>
+
 ```
 
 ## Dom ref
-
 ## Conditional
-
 ## Input binding
-
 ## Event modifier

src/3-lifecycle/README.md

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

src/4-component-composition/README.md

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

src/7-real-usecase/README.md

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