create-coralite 0.47.1 → 1.0.0-rc.1

package/package.json

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

package/templates/css/package.json

@@ -6,10 +6,12 @@
   "scripts": {
     "start": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --experimental-import-meta-resolve\" coralite-scripts dev",
     "test": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --experimental-import-meta-resolve\" coralite-scripts test",
-    "build": "coralite-scripts build"
+    "build": "coralite-scripts build",
+    "check": "coralite-scripts check",
+    "fix": "coralite-scripts fix"
   },
   "devDependencies": {
-    "coralite-scripts": "^0.47.1",
+    "coralite-scripts": "^1.0.0-rc.1",
     "cross-env": "^10.1.0"
   }
 }

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

@@ -1,7 +1,29 @@
 <template id="coralite-card">
-  <div class="card gap d-flex justify-content-center">
-    <div class="card-body">
-      <slot></slot>
-    </div>
+  <div class="card-body">
+    <slot></slot>
   </div>
-</template>
+</template>
+
+<style>
+  :host {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacer-1);
+    color: var(--light);
+    backdrop-filter: blur(10px);
+    border-color: #ffffff2e;
+    border-style: solid;
+    border-width: 0 1px;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+  }
+
+  .card-body {
+    padding: var(--spacer-1);
+    margin: 0;
+    display: flex;
+    gap: var(--spacer-1);
+    align-items: center;
+    justify-content: center;
+  }
+</style>

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

@@ -5,6 +5,10 @@
 </template>
 
 <style>
+  :host {
+    display: inline-block;
+  }
+
   .btn {
     background-color: var(--primary);
     color: var(--body-bg);
@@ -27,34 +31,41 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
+    // Declare and validate component input attributes
     attributes: {
       step: {
         type: Number,
-        default: 1
+        default: 1,
+        validate: (val) => val > 0 || 'Step must be greater than 0'
       }
     },
 
+    // Server-side initial state (executed during SSR/build and stripped from client bundle)
     server () {
       return {
         count: 0
       }
     },
 
-    client ({ state, signal, refs }) {
-      const button = refs('count-button')
-
-      button.addEventListener('click', async () => {
-        button.textContent = 'Count is loading....'
+    // Client-side interactive controller (executed in the browser upon hydration)
+    async client ({ state, signal, refs, emit }) {
+      // Dynamically import third-party modules ahead of time to avoid click latency
+      const { default: confetti } = await import('https://esm.sh/canvas-confetti@latest')
 
-        const { default: confetti } = await import('https://esm.sh/canvas-confetti@latest')
+      // Query element using its scoped ref attribute
+      const button = refs('count-button')
 
-        // Coralite automatically patches the {{ count }} token in the template.
+      // Bind event listener with automatic signal cleanup on component unmount
+      button.addEventListener('click', () => {
+        // Direct reactive mutation triggers Coralite's O(1) microtask DOM updates
         state.count += state.step
-        button.textContent = `Count is ${state.count}`
 
-        // Explode confetti :)
+        // Dispatch custom DOM event to parent listeners
+        emit('count-change', { count: state.count })
+
+        // Trigger confetti animation instantly
         confetti()
       }, { signal })
     }
   })
-</script>
+</script>

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

@@ -1,24 +1,34 @@
 <template id="coralite-footer">
   <footer class="text-center">
-    Made with <a href="https://coralite.dev/" target="_blank">{{ capitaliseName }}</a>
+    Made with <a href="https://coralite.dev/" target="_blank">{{ name }}</a> © {{ year }}
   </footer>
 </template>
 
+<style>
+  :host {
+    display: block;
+    margin-top: auto;
+    padding: var(--padding-y) 0;
+    text-align: center;
+  }
+</style>
+
 <script type="module">
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
+    // Declare component attributes with automatic type coercion, defaults, and transformation
     attributes: {
       name: {
         type: String,
-        default: 'coralite'
+        // Synchronously transform and format attribute values before state application
+        transform: (val) => (val ? val.trim().charAt(0).toUpperCase() + val.trim().slice(1) : 'Coralite')
       }
     },
 
+    // Pure computed getters for derived or dynamic values
     getters: {
-      capitaliseName: (state) => {
-        return state.name[0].toUpperCase() + state.name.slice(1)
-      }
+      year: () => new Date().getFullYear()
     }
   })
-</script>
+</script>

package/templates/css/src/css/styles.css

@@ -1,5 +1,10 @@
-/* Imports */
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=TikTok+Sans:wght@300..900&display=swap');
+/*
+ * Coralite Global Stylesheet
+ * -----------------------------------------------------------------
+ * 1. Design Tokens (:root CSS Custom Properties)
+ * 2. Reset & Typography (html, body, headings, links)
+ * 3. Layout & Utilities (.container, .d-flex, .gap, .text-center)
+ */
 
 /* Variables */
 :root {
@@ -25,9 +30,9 @@
   --padding-y: .5rem;
 
   /* Fonts */
-  --font-body: "TikTok Sans", sans-serif;
-  --font-heading: "TikTok Sans", sans-serif;
-  --font-monospace: "JetBrains Mono", monospace;
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-monospace: "Courier New", courier, monospace;
   --font-size: 20px;
 
   /* Text */
@@ -131,22 +136,3 @@ img {
   padding: var(--spacer-2);
   margin: auto;
 }
-
-/* Components */
-.card {
-  --card-border-color: #ffffff2e;
-
-  color: var(--light);
-  background-image: var(--gradient-glass);
-  backdrop-filter: blur(10px);
-  border-color: var(--card-border-color);
-  border-style: solid;
-  border-width: 0 1px;
-  border-radius: var(--border-radius);
-  overflow: hidden;
-}
-
-.card-body {
-  padding: var(--spacer-1);
-  margin: 0;
-}

package/templates/scss/package.json

@@ -6,10 +6,12 @@
   "scripts": {
     "start": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --experimental-import-meta-resolve\" coralite-scripts dev",
     "test": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --experimental-import-meta-resolve\" coralite-scripts test",
-    "build": "coralite-scripts build"
+    "build": "coralite-scripts build",
+    "check": "coralite-scripts check",
+    "fix": "coralite-scripts fix"
   },
   "devDependencies": {
-    "coralite-scripts": "^0.47.1",
+    "coralite-scripts": "^1.0.0-rc.1",
     "cross-env": "^10.1.0"
   }
 }

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

@@ -1,7 +1,29 @@
 <template id="coralite-card">
-  <div class="card gap d-flex justify-content-center">
-    <div class="card-body">
-      <slot></slot>
-    </div>
+  <div class="card-body">
+    <slot></slot>
   </div>
-</template>
+</template>
+
+<style>
+  :host {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacer-1);
+    color: var(--light);
+    backdrop-filter: blur(10px);
+    border-color: #ffffff2e;
+    border-style: solid;
+    border-width: 0 1px;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+  }
+
+  .card-body {
+    padding: var(--spacer-1);
+    margin: 0;
+    display: flex;
+    gap: var(--spacer-1);
+    align-items: center;
+    justify-content: center;
+  }
+</style>

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

@@ -5,6 +5,10 @@
 </template>
 
 <style>
+  :host {
+    display: inline-block;
+  }
+
   .btn {
     background-color: var(--primary);
     color: var(--body-bg);
@@ -27,34 +31,41 @@
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
+    // Declare and validate component input attributes
     attributes: {
       step: {
         type: Number,
-        default: 1
+        default: 1,
+        validate: (val) => val > 0 || 'Step must be greater than 0'
       }
     },
 
+    // Server-side initial state (executed during SSR/build and stripped from client bundle)
     server () {
       return {
         count: 0
       }
     },
 
-    client ({ state, signal, refs }) {
-      const button = refs('count-button')
-
-      button.addEventListener('click', async () => {
-        button.textContent = 'Count is loading....'
+    // Client-side interactive controller (executed in the browser upon hydration)
+    async client ({ state, signal, refs, emit }) {
+      // Dynamically import third-party modules ahead of time to avoid click latency
+      const { default: confetti } = await import('https://esm.sh/canvas-confetti@latest')
 
-        const { default: confetti } = await import('https://esm.sh/canvas-confetti@latest')
+      // Query element using its scoped ref attribute
+      const button = refs('count-button')
 
-        // Coralite automatically patches the {{ count }} token in the template.
+      // Bind event listener with automatic signal cleanup on component unmount
+      button.addEventListener('click', () => {
+        // Direct reactive mutation triggers Coralite's O(1) microtask DOM updates
         state.count += state.step
-        button.textContent = `Count is ${state.count}`
 
-        // Explode confetti :)
+        // Dispatch custom DOM event to parent listeners
+        emit('count-change', { count: state.count })
+
+        // Trigger confetti animation instantly
         confetti()
       }, { signal })
     }
   })
-</script>
+</script>

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

@@ -1,28 +1,34 @@
 <template id="coralite-footer">
   <footer class="text-center">
-    Made with <a href="https://coralite.dev/" target="_blank">{{ capitaliseName }}</a>
+    Made with <a href="https://coralite.dev/" target="_blank">{{ name }}</a> © {{ year }}
   </footer>
 </template>
 
+<style>
+  :host {
+    display: block;
+    margin-top: auto;
+    padding: var(--padding-y) 0;
+    text-align: center;
+  }
+</style>
+
 <script type="module">
   import { defineComponent } from 'coralite'
 
   export default defineComponent({
+    // Declare component attributes with automatic type coercion, defaults, and transformation
     attributes: {
       name: {
         type: String,
-        default: ''
+        // Synchronously transform and format attribute values before state application
+        transform: (val) => (val ? val.trim().charAt(0).toUpperCase() + val.trim().slice(1) : 'Coralite')
       }
     },
 
+    // Pure computed getters for derived or dynamic values
     getters: {
-      capitaliseName: (state) => {
-        if (state.name) {
-          return state.name[0].toUpperCase() + state.name.slice(1)
-        }
-  
-        return 'Coralite'
-      }
+      year: () => new Date().getFullYear()
     }
   })
-</script>
+</script>

package/templates/scss/src/scss/_variables.scss

@@ -26,9 +26,23 @@ $padding-x: 1rem;
 $padding-y: .5rem;
 
 /* fonts */
-$font-body: "TikTok Sans", sans-serif;
-$font-heading: "TikTok Sans", sans-serif;
-$font-monospace: "JetBrains Mono", monospace;
+$font-body: -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  Helvetica,
+  Arial,
+  sans-serif;
+$font-heading: -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  Helvetica,
+  Arial,
+  sans-serif;
+$font-monospace: "Courier New",
+  courier,
+  monospace;
 $font-size: 20px;
 
 /* text */
@@ -54,4 +68,4 @@ $box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
   --spacer-base: #{$spacer-base};
   --box-shadow: #{$box-shadow};
   --code-colour: #{$code-colour};
-}
+}

package/templates/scss/src/scss/styles.scss

@@ -1,8 +1,14 @@
-@use "./font";
+/*
+ * Coralite Global Stylesheet
+ * -----------------------------------------------------------------
+ * 1. Design Tokens (:root CSS Custom Properties)
+ * 2. Reset & Typography (html, body, headings, links)
+ * 3. Layout & Utilities (.container, .d-flex, .gap, .text-center)
+ */
+
 @use "./variables" as *;
 @use "./base";
 @use "./layout";
-@use "./card";
 
 body {
   min-height: 100vh;

package/templates/scss/src/scss/_card.scss

@@ -1,25 +0,0 @@
-@use "variables" as *;
-
-$card-border-color: #ffffff2e;
-
-.card {
-  color: $light;
-  background-image: var(--gradient-glass);
-  backdrop-filter: blur(10px);
-  border-color: $card-border-color;
-  border-style: solid;
-  border-width: 0 1px;
-  border-radius: $border-radius;
-  overflow: hidden;
-}
-
-.card-title {
-  padding: $spacer-1;
-  margin: 0;
-  border-bottom: 1px solid $card-border-color;
-}
-
-.card-body {
-  padding: $spacer-1;
-  margin: 0;
-}

package/templates/scss/src/scss/_font.scss

@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=TikTok+Sans:wght@300..900&display=swap');