add create-section script

components/2-templating/6-conditional/TrafficLight.jsx

@@ -1,17 +1,18 @@
 import { useState, useMemo } from "react"
 
+const TRAFFIC_LIGHTS = ["red", 'orange', "green"]
+
 export default function TrafficLight(){
-  const [trafficLights] = useState(["red", 'orange', "green"])
 
     const [lightIndex, setLightIndex] = useState(0)
 
     const light = useMemo(() => 
       
-       trafficLights[lightIndex]
-    , [lightIndex, trafficLights]);
+    TRAFFIC_LIGHTS[lightIndex]
+    , [lightIndex]);
 
     function nextLight(){
-        if(lightIndex + 1 > trafficLights.length - 1){
+        if(lightIndex + 1 > TRAFFIC_LIGHTS.length - 1){
             setLightIndex(0)
         } else {
             setLightIndex(lightIndex + 1)

components/2-templating/6-conditional/TrafficLight.vue

@@ -11,7 +11,6 @@
         } else {
             lightIndex.value++
         }
-        
     }
 
 </script>

components/4-component/1-props/App.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react"
+import Hello from "./Hello.jsx"
+
+export default function App(){
+    const [username, setUsername] = useState("John");
+
+    function handleChange(event){
+        setUsername(event.target.value)
+    }
+
+    return (
+        <>
+            <input value={username} onChange={handleChange} />
+            <Hello name={username} />
+        </>
+    )
+}

components/4-component/1-props/App.svelte

@@ -0,0 +1,8 @@
+<script>
+    import Hello from "./Hello.svelte"
+    let username = "John"
+</script>
+
+<input bind:value={username} />
+
+<Hello name={username} />

components/4-component/1-props/App.vue

@@ -0,0 +1,10 @@
+<script setup>
+    import { ref } from "vue"
+    import Hello from "./Hello.vue"
+
+    const username = ref("John")
+</script>
+
+<input v-model="username" />
+
+<Hello :name="username" />

components/4-component/1-props/Hello.jsx

@@ -0,0 +1,3 @@
+export default function Hello(props){
+    return <p>Hello {props.name} !</p>
+}

components/4-component/1-props/Hello.svelte

@@ -0,0 +1,5 @@
+<script>
+    let name;
+</script>
+
+<p>Hello {name} !</p>

components/4-component/1-props/Hello.vue

@@ -0,0 +1,7 @@
+<script setup>
+    const props = defineProps({
+        name: String
+    })
+</script>
+
+<p>Hello {props.name} !</p>

package.json

@@ -2,9 +2,10 @@
   "name": "component-party",
   "version": "1.0.0",
   "description": "",
+  "type": "module",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "create-section": "node scripts/createSection.js"
   },
   "repository": {
     "type": "git",

scripts/createSection.js

@@ -0,0 +1,41 @@
+import fs from "fs"
+
+function getArgs(){
+    const [componentName] = process.argv.slice(2);
+    return {
+        componentName
+    }
+}
+
+
+
+const args = getArgs()
+
+async function main(){
+    fs.mkdirSync("new-section")
+
+    const frameworks = [
+        {
+            name: "svelte",
+            ext: "svelte"
+        },
+        {
+            name: "react",
+            ext: "jsx"
+        },
+        {
+            name: "vue3",
+            ext: "vue"
+        }
+    ]
+
+    const componentName = args.componentName || "Component"
+
+    for(const {name, ext} of frameworks){
+        const dir = `new-section/${name}`
+        fs.mkdirSync(dir)
+        fs.writeFileSync(`${dir}/${componentName}.${ext}`, "")
+    }
+}
+
+main().catch(console.error)