create-coralite 0.33.1 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-coralite",
-  "version": "0.33.1",
+  "version": "0.35.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.1",
+    "coralite-scripts": "^0.35.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,18 +27,26 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    async script ({ properties, refs }) {
+    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')
-      const step = properties.step ? parseInt(properties.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}`
+        // Coralite automatically patches the {{ count }} token in the template.
+        state.count += state.step
 
         // Explode confetti :)
         confetti()

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

@@ -8,13 +8,16 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    properties: {
-      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.1",
+    "coralite-scripts": "^0.35.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,18 +27,26 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    async script ({ properties, refs }) {
+    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')
-      const step = properties.step ? parseInt(properties.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}`
+        // Coralite automatically patches the {{ count }} token in the template.
+        state.count += state.step
 
         // Explode confetti :)
         confetti()

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

@@ -8,12 +8,19 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
-    properties: {
-      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'
       }
     }