create-coralite 0.33.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-coralite",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Coralite scaffolding script",
   "bin": {
     "create-coralite": "bin/index.js",

package/templates/css/package.json

@@ -8,7 +8,7 @@
     "build": "coralite-scripts build"
   },
   "devDependencies": {
-    "coralite-scripts": "^0.33.0",
+    "coralite-scripts": "^0.34.0",
     "cross-env": "^10.1.0"
   }
 }

package/templates/css/src/components/coralite-counter.html

@@ -1,6 +1,6 @@
 <template id="coralite-counter">
   <button ref="count-button" type="button" class="btn">
-    Count is 0
+    Count is {{ count }}
   </button>
 </template>
 
@@ -27,29 +27,30 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    client: {
-      imports: [
-        {
-          specifier: 'https://esm.sh/canvas-confetti@latest',
-          defaultExport: 'confetti'
-        }
-      ],
-      script ({ values, helpers, imports }) {
-        const button = helpers.refs('count-button')
-        const step = values.step ? parseInt(values.step) : 1
-        let count = 0
-  
-        button.addEventListener('click', () => {
-          // increment the counter by the specified step value
-          count += step
-
-          // update the button's text content to reflect the new count value
-          button.textContent = `Count is ${count}`
-
-          // Explode confetti :)
-          imports.confetti()
-        })
+    attributes: {
+      step: {
+        type: Number,
+        default: 1
       }
+    },
+
+    async data () {
+      return {
+        count: 0
+      }
+    },
+
+    async script ({ state, refs }) {
+      const { default: confetti } = await import('https://esm.sh/canvas-confetti@latest')
+      const button = refs('count-button')
+
+      button.addEventListener('click', () => {
+        // Coralite automatically patches the {{ count }} token in the template.
+        state.count += state.step
+
+        // Explode confetti :)
+        confetti()
+      })
     }
   })
 </script>

package/templates/css/src/components/coralite-footer.html

@@ -8,13 +8,16 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    tokens: {
-      capitaliseName ({ name }) {
-        if (name) {
-          return name[0].toUpperCase() + name.slice(1)
-        }
+    attributes: {
+      name: {
+        type: String,
+        default: 'coralite'
+      }
+    },
 
-        return 'Coralite'
+    getters: {
+      capitaliseName: (state) => {
+        return state.name[0].toUpperCase() + state.name.slice(1)
       }
     }
   })

package/templates/scss/package.json

@@ -8,7 +8,7 @@
     "build": "coralite-scripts build"
   },
   "devDependencies": {
-    "coralite-scripts": "^0.33.0",
+    "coralite-scripts": "^0.34.0",
     "cross-env": "^10.1.0"
   }
 }

package/templates/scss/src/components/coralite-counter.html

@@ -1,6 +1,6 @@
 <template id="coralite-counter">
   <button ref="count-button" type="button" class="btn">
-    Count is 0
+    Count is {{ count }}
   </button>
 </template>
 
@@ -27,29 +27,30 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    client: {
-      imports: [
-        {
-          specifier: 'https://esm.sh/canvas-confetti@latest',
-          defaultExport: 'confetti'
-        }
-      ],
-      script ({ values, helpers, imports }) {
-        const button = helpers.refs('count-button')
-        const step = values.step ? parseInt(values.step) : 1
-        let count = 0
-  
-        button.addEventListener('click', () => {
-          // increment the counter by the specified step value
-          count += step
-
-          // update the button's text content to reflect the new count value
-          button.textContent = `Count is ${count}`
-
-          // Explode confetti :)
-          imports.confetti()
-        })
+    attributes: {
+      step: {
+        type: Number,
+        default: 1
       }
+    },
+
+    async data () {
+      return {
+        count: 0
+      }
+    },
+
+    async script ({ state, refs }) {
+      const { default: confetti } = await import('https://esm.sh/canvas-confetti@latest')
+      const button = refs('count-button')
+
+      button.addEventListener('click', () => {
+        // Coralite automatically patches the {{ count }} token in the template.
+        state.count += state.step
+
+        // Explode confetti :)
+        confetti()
+      })
     }
   })
 </script>

package/templates/scss/src/components/coralite-footer.html

@@ -8,12 +8,19 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    tokens: {
-      capitaliseName ({ name }) {
-        if (name) {
-          return name[0].toUpperCase() + name.slice(1)
-        }
+    attributes: {
+      name: {
+        type: String,
+        default: ''
+      }
+    },
 
+    getters: {
+      capitaliseName: (state) => {
+        if (state.name) {
+          return state.name[0].toUpperCase() + state.name.slice(1)
+        }
+  
         return 'Coralite'
       }
     }