rip-lang 3.13.11 → 3.13.13

package/README.md

@@ -9,7 +9,7 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.3-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.13-blue.svg" alt="Version"></a>
   <a href="#zero-dependencies"><img src="https://img.shields.io/badge/dependencies-ZERO-brightgreen.svg" alt="Dependencies"></a>
   <a href="#"><img src="https://img.shields.io/badge/tests-1%2C251%2F1%2C251-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
@@ -286,12 +286,12 @@ Rip's reactivity is framework-agnostic — use it with React, Vue, Svelte, or va
 
 ## Rip UI
 
-Load `rip-ui.min.js` (~53KB Brotli) — the Rip compiler and pre-compiled UI framework in one file. Components are `.rip` source files, compiled on demand, rendered with fine-grained reactivity. No build step. No bundler.
+Load `rip.min.js` (~54KB Brotli) — the Rip compiler and UI framework in one file. Components are `.rip` source files, compiled on demand, rendered with fine-grained reactivity. No build step. No bundler.
 
 ```html
-<script type="module" src="rip-ui.min.js"></script>
+<script defer src="rip.min.js" data-mount="Home"></script>
 
-<script type="text/rip" data-name="index">
+<script type="text/rip">
 export Home = component
   @count := 0
   render
@@ -302,7 +302,43 @@ export Home = component
 </script>
 ```
 
-That's it. The runtime auto-detects inline `data-name` components, compiles them, and launches the app with hash routing — no bootstrap script needed. Two keywords (`component` and `render`) are all the language adds. Everything else (`:=` state, `~=` computed, methods, lifecycle) is standard Rip.
+That's it. All `<script type="text/rip">` tags share scope — `export` makes names visible across tags. `data-mount` mounts the named component after all scripts execute. Two keywords (`component` and `render`) are all the language adds. Everything else (`:=` state, `~=` computed, methods, lifecycle) is standard Rip.
+
+**Loading patterns:**
+
+```html
+<!-- Inline components + declarative mount -->
+<script defer src="rip.min.js" data-mount="App"></script>
+<script type="text/rip">export App = component ...</script>
+
+<!-- Mount from code instead of data-mount -->
+<script defer src="rip.min.js"></script>
+<script type="text/rip">export App = component ...</script>
+<script type="text/rip">App.mount '#app'</script>
+
+<!-- External .rip files via data-src -->
+<script defer src="rip.min.js" data-mount="App" data-src="
+  components/header.rip
+  components/footer.rip
+  app.rip
+"></script>
+
+<!-- External .rip files via separate tags -->
+<script defer src="rip.min.js" data-mount="App"></script>
+<script type="text/rip" src="components/header.rip"></script>
+<script type="text/rip" src="app.rip"></script>
+
+<!-- Server mode with full app lifecycle (router, stash, hot reload) -->
+<script defer src="/rip/rip.min.js" data-launch="bundle"></script>
+
+<!-- Server mode with stash persistence (sessionStorage) -->
+<script defer src="/rip/rip.min.js" data-launch="bundle" data-persist></script>
+
+<!-- Server mode with localStorage persistence -->
+<script defer src="/rip/rip.min.js" data-launch="bundle" data-persist="local"></script>
+```
+
+Every component has a static `mount(target)` method — `App.mount '#app'` is shorthand for `App.new().mount('#app')`. Target defaults to `'body'`.
 
 The UI framework is built into rip-lang: file-based router, reactive stash, component store, and renderer. **[Try the demo](https://shreeve.github.io/rip-lang/demo.html)** — a complete app in one HTML file.
 
@@ -329,7 +365,7 @@ Smaller codebase, modern output, built-in reactivity.
 Run Rip directly in the browser — inline scripts and the console REPL both support `await` via the `!` operator:
 
 ```html
-<script type="module" src="rip-ui.min.js"></script>
+<script defer src="rip.min.js"></script>
 <script type="text/rip">
   res = fetch! 'https://api.example.com/data'
   data = res.json!
@@ -429,7 +465,7 @@ rip -t file.rip        # Tokens
 rip -s file.rip        # S-expressions
 bun run test           # 1251 tests
 bun run parser         # Rebuild parser
-bun run browser        # Build browser bundle
+bun run build          # Build browser bundle
 ```
 
 ---

package/docs/charts.html

@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
-  <script type="module" src="dist/rip.min.js"></script>
+  <script defer src="dist/rip.min.js" data-mount="Dashboard"></script>
   <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 body {
@@ -65,7 +65,7 @@ h1 { font-size: 24px; font-weight: 600; color: #060606; margin-bottom: 4px; }
 
 <!-- ===== KpiCard ===== -->
 
-<script type="text/rip" data-name="kpi-card">
+<script type="text/rip">
 export KpiCard = component
   @label := ''
   @value := ''
@@ -99,7 +99,7 @@ export KpiCard = component
 
 <!-- ===== ChartCard ===== -->
 
-<script type="text/rip" data-name="chart-card">
+<script type="text/rip">
 export ChartCard = component
   @title := ''
   @subtitle := ''
@@ -116,7 +116,7 @@ export ChartCard = component
 
 <!-- ===== Dashboard ===== -->
 
-<script type="text/rip" data-name="index">
+<script type="text/rip">
 export Dashboard = component
 
   # ── ECharts theme (evidence.dev) ──
@@ -859,7 +859,7 @@ export Dashboard = component
 
   render
     h1 "ACME Corp Dashboard"
-    p class: 'subtitle', "FY 2026 SaaS Metrics \u2014 styled with the evidence.dev ECharts theme"
+    p class: 'subtitle', "FY 2026 SaaS Metrics - styled with the evidence.dev ECharts theme"
 
     .kpi-row
       for kpi in kpis
@@ -872,7 +872,7 @@ export Dashboard = component
       ChartCard title: 'Monthly Revenue',               subtitle: 'Total recurring revenue by month',              chartId: 'line'
       ChartCard title: 'Revenue by Product',             subtitle: 'Stacked area breakdown across product lines',   chartId: 'area'
       ChartCard title: 'Quarterly Revenue',              subtitle: 'Quarter-over-quarter comparison',               chartId: 'bar'
-      ChartCard title: 'Revenue by Product \u00d7 Quarter', subtitle: 'Stacked bar with product breakdown',         chartId: 'stackedBar'
+      ChartCard title: 'Revenue by Product × Quarter', subtitle: 'Stacked bar with product breakdown',         chartId: 'stackedBar'
       ChartCard title: 'Revenue & Margin',               subtitle: 'Revenue bars with gross margin % line overlay', chartId: 'combo'
       ChartCard title: 'Revenue & Growth Rate',          subtitle: 'Dual-axis: revenue (left) and YoY growth (right)', chartId: 'multiAxis'
       ChartCard title: 'Customers by Segment',           subtitle: 'Distribution across customer tiers',            chartId: 'pie'

package/docs/demo.html

@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
-  <script type="module" src="dist/rip.min.js"></script>
+  <script defer src="dist/rip.min.js" data-mount="Dashboard"></script>
   <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 body {
@@ -65,7 +65,7 @@ h1 { font-size: 24px; font-weight: 600; color: #060606; margin-bottom: 4px; }
 
 <!-- ===== KpiCard ===== -->
 
-<script type="text/rip" data-name="kpi-card">
+<script type="text/rip">
 export KpiCard = component
   @label := ''
   @value := ''
@@ -99,7 +99,7 @@ export KpiCard = component
 
 <!-- ===== ChartCard ===== -->
 
-<script type="text/rip" data-name="chart-card">
+<script type="text/rip">
 export ChartCard = component
   @title := ''
   @subtitle := ''
@@ -116,7 +116,7 @@ export ChartCard = component
 
 <!-- ===== Dashboard ===== -->
 
-<script type="text/rip" data-name="index">
+<script type="text/rip">
 export Dashboard = component
 
   # ── ECharts theme (evidence.dev) ──
@@ -923,7 +923,7 @@ export Dashboard = component
         return '' if p.seriesName is 'Error'
         d = cholesterolWithStd.find(-> it[0] is p.value[0])
         return "Age #{p.value[0]}<br>Avg: #{p.value[1]} mg/dL" unless d and d[2] > 0
-        "Age #{d[0]}<br>Avg: #{d[1]} mg/dL<br>\u00b1#{d[2]} std dev"
+        "Age #{d[0]}<br>Avg: #{d[1]} mg/dL<br>±#{d[2]} std dev"
       legend: { show: false }
       series: [
         { type: 'custom', name: 'Error', data: cholesterolWithStd, renderItem: errorBarRenderer, z: 1 }
@@ -949,7 +949,7 @@ export Dashboard = component
 
   render
     h1 "ACME Corp Dashboard"
-    p class: 'subtitle', "FY 2026 SaaS Metrics \u2014 styled with the evidence.dev ECharts theme"
+    p class: 'subtitle', "FY 2026 SaaS Metrics - styled with the evidence.dev ECharts theme"
 
     .kpi-row
       for kpi in kpis
@@ -962,7 +962,7 @@ export Dashboard = component
       ChartCard title: 'Monthly Revenue',               subtitle: 'Total recurring revenue by month',              chartId: 'line'
       ChartCard title: 'Revenue by Product',             subtitle: 'Stacked area breakdown across product lines',   chartId: 'area'
       ChartCard title: 'Quarterly Revenue',              subtitle: 'Quarter-over-quarter comparison',               chartId: 'bar'
-      ChartCard title: 'Revenue by Product \u00d7 Quarter', subtitle: 'Stacked bar with product breakdown',         chartId: 'stackedBar'
+      ChartCard title: 'Revenue by Product × Quarter', subtitle: 'Stacked bar with product breakdown',         chartId: 'stackedBar'
       ChartCard title: 'Revenue & Margin',               subtitle: 'Revenue bars with gross margin % line overlay', chartId: 'combo'
       ChartCard title: 'Revenue & Growth Rate',          subtitle: 'Dual-axis: revenue (left) and YoY growth (right)', chartId: 'multiAxis'
       ChartCard title: 'Customers by Segment',           subtitle: 'Distribution across customer tiers',            chartId: 'pie'
@@ -1009,7 +1009,7 @@ export Dashboard = component
     p class: 'section', "Clinical"
     .grid
       ChartCard title: 'Hemoglobin A1c Distribution'       , subtitle: 'Population distribution of A1c results (green: normal, yellow: pre-diabetic, red: diabetic)', chartId: 'a1c', wide: true
-      ChartCard title: 'Cholesterol by Age (\u00b11\u03c3)', subtitle: 'Average total cholesterol with standard deviation band and trend line',                       chartId: 'cholesterolBand', wide: true
+      ChartCard title: 'Cholesterol by Age (±1σ)', subtitle: 'Average total cholesterol with standard deviation band and trend line',                       chartId: 'cholesterolBand', wide: true
       ChartCard title: 'Total Cholesterol by Age'          , subtitle: 'Average total cholesterol vs patient age with trend line',                                    chartId: 'cholesterol'
 </script>