rip-lang 3.10.7 → 3.10.9

package/docs/results/index.html

@@ -7,7 +7,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,500;0,700;1,400&family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
-  <script type="module" src="../dist/rip-ui.min.js"></script>
+  <script type="module" src="../dist/rip-ui.min.js" data-hash="true"></script>
   <style>
 /* ==========================================================================
    Lab Results — Styles
@@ -434,6 +434,7 @@ body {
   color: rgba(255,255,255,.85);
   margin-top: 20px;
   line-height: 1.5;
+  white-space: pre-line;
 }
 
 .detail__content {
@@ -500,6 +501,18 @@ body {
   color: rgba(51,51,51,.5);
 }
 
+.detail__maintenance-icon + div {
+  max-width: 80%;
+}
+
+.detail__footer-image {
+  flex: 1;
+  min-height: 280px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .gauge {
   position: relative;
   display: inline-block;
@@ -604,6 +617,8 @@ export Home = component
     cholesterolHdlRatio: 4.3
     glucose: 75
     a1c: 5.2
+    waistCircumference: 36
+    bloodPressure: '118/76'
   ]
 
   ranges :=
@@ -706,7 +721,9 @@ export Home = component
       drawerOpen = false
     mq.addEventListener 'change', handler
 
-  ~> @setupResize()
+  ~>
+    @setupResize()
+    window.app = { history, ranges, firstName, lastName, age, gender }
 
   render
     .app
@@ -908,28 +925,18 @@ export Summary = component
     s = []
     s.push { label: 'Heart Health', keys: ['triglycerides', 'hdlCholesterol', 'totalCholesterol', 'cholesterolHdlRatio'] }
     s.push { label: 'Pancreas Health', keys: ['glucose', 'a1c'] }
-    if history and history[0] and history[0].waistCircumference?
-      s.push { label: 'Physical Measurements', keys: ['waistCircumference', 'bloodPressure'] }
+    s.push { label: 'Physical Measurements', keys: ['waistCircumference', 'bloodPressure'] } if history?[0]?.waistCircumference
     s
 
-  rows ~=
-    result = []
-    for section in sections
-      for k in section.keys
-        ref = ranges[k]
-        continue unless ref
-        val = history[0]?[k]
-        continue unless val?
-        status = acceptable(k, val)
-        result.push
-          section: section.label
-          key: k
-          name: ref.name
-          desc: ref.desc
-          value: String(val)
-          rowClass: if status is 'acceptable' then 'row-acceptable' else 'row-unacceptable'
-          icon: if status is 'acceptable' then checkIcon else warnIcon
-    result
+  rowClass: (k) ->
+    val = history[0]?[k]
+    return '' unless val?
+    if acceptable(k, val) is 'acceptable' then 'row-acceptable' else 'row-unacceptable'
+
+  rowIcon: (k) ->
+    val = history[0]?[k]
+    return '' unless val?
+    if acceptable(k, val) is 'acceptable' then checkIcon else warnIcon
 
   render
     .('brochure__page page-summary')
@@ -949,22 +956,27 @@ export Summary = component
 
         .summary__copy "This report serves as an easy reference to review all of your testing results, including data from previous years. We encourage you to use this information in conjunction with an exam by your doctor, not as a replacement for one. We hope this summary will be a good starting point for conversations with your doctor about improving your overall health."
 
-      table.summary-table
-        thead
-          tr
-            th ""
-            th historyDate
-        tbody
-          for row in rows
+      for section, i in sections
+        table.summary-table
+          unless i
+            thead
+              tr
+                th
+                th historyDate
+          tbody
             tr
-              class: row.rowClass
+              td section.label
               td
-                .status-icon
-                  innerHTML: row.icon
-                div
-                  .name row.name
-                  .desc row.desc
-              td.value row.value
+            for k in section.keys
+              tr
+                class: @rowClass(k)
+                td
+                  .status-icon
+                    innerHTML: @rowIcon(k)
+                  div
+                    .name ranges[k].name
+                    .desc ranges[k].desc
+                td.value history[0]?[k]
 </script>
 
 <script type="text/rip" data-name="detail-page">
@@ -978,14 +990,14 @@ export DetailPage = component
 
   shouldShow ~=
     return true unless topic.conditional
-    history and history[0] and history[0][topic.conditional]?
+    history?[0]?[topic.conditional]?
 
   tipIcons :=
     utensils: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2v7c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V2"/><line x1="7" y1="2" x2="7" y2="22"/><path d="M21 15V2a5 5 0 00-5 5v6h4"/><line x1="21" y1="12" x2="21" y2="22"/></svg>'
-    drop: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>'
-    walk: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="13" cy="4" r="2"/><path d="M7 21l3-4V11l-2-2-3 3"/><path d="M16 21l-2-6-3-1"/></svg>'
-    doctor: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 11V3M4.93 7.5l7.07 3.5 7.07-3.5"/><circle cx="12" cy="18" r="3"/><line x1="12" y1="15" x2="12" y2="11"/></svg>'
-    smile: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>'
+    drop:     '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>'
+    walk:     '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="13" cy="4" r="2"/><path d="M7 21l3-4V11l-2-2-3 3"/><path d="M16 21l-2-6-3-1"/></svg>'
+    doctor:   '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 11V3M4.93 7.5l7.07 3.5 7.07-3.5"/><circle cx="12" cy="18" r="3"/><line x1="12" y1="15" x2="12" y2="11"/></svg>'
+    smile:    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>'
 
   checkIcon := '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'
   warnIcon  := '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>'
@@ -1008,9 +1020,6 @@ export DetailPage = component
               .detail__header-title topic.title
               .detail__header-copy topic.copy
 
-        if topic.isImagePage
-          .detail__header style: "background-image: url(#{topic.image}); background-size: cover"
-
         .detail__content
           for bio in topic.biomarkers
             .detail__item
@@ -1025,6 +1034,7 @@ export DetailPage = component
                     .desc ranges[bio.key].desc
 
                 .detail__item-info
+                  p ranges[bio.key].info[@statusOf(bio.key)]
                   p innerHTML: bio.text
                   if bio.extra
                     p bio.extra
@@ -1036,6 +1046,9 @@ export DetailPage = component
                       .detail__maintenance-icon
                         innerHTML: (tipIcons[tip.icon] or '')
                       div tip.text
+
+        if topic.isImagePage
+          .detail__footer-image style: "background-image: url(#{topic.image})"
 </script>
 
 <script type="text/rip" data-name="gauge">
@@ -1106,12 +1119,5 @@ export Gauge = component
       .gauge__units units
 </script>
 
-<!-- ===== Boot ===== -->
-
-<script type="text/rip">
-  { launch } = importRip! '/rip/ui.rip'
-  launch hash: true
-</script>
-
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.10.7",
+  "version": "3.10.9",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",

package/src/browser.js

@@ -136,12 +136,27 @@ if (typeof globalThis !== 'undefined') {
   globalThis.__ripExports = { compile, compileToJS, formatSExpr, VERSION, BUILD_DATE, getReactiveRuntime, getComponentRuntime };
 }
 
-// Auto-process <script type="text/rip"> blocks.
+// Auto-launch: if rip-ui is bundled and the page has component scripts or a data-url,
+// call launch() automatically with config from the script tag's data attributes.
+async function autoLaunch() {
+  if (globalThis.__ripLaunched) return;
+  const ui = importRip.modules?.['ui.rip'];
+  if (!ui?.launch) return;
+  const cfg = document.querySelector('script[data-hash], script[data-url]');
+  const url = cfg?.getAttribute('data-url') || '';
+  const hasComponents = document.querySelectorAll('script[type="text/rip"][data-name]').length > 0;
+  if (!hasComponents && !url) return;
+  const opts = {};
+  if (cfg?.hasAttribute('data-hash')) opts.hash = cfg.getAttribute('data-hash') !== 'false';
+  await ui.launch(url, opts);
+}
+
+// Auto-process <script type="text/rip"> blocks, then auto-launch if applicable.
 // Deferred via queueMicrotask so bundled entry code (e.g. rip-ui.min.js registering
 // importRip.modules) runs before script processing begins.
 if (typeof document !== 'undefined') {
   globalThis.__ripScriptsReady = new Promise(resolve => {
-    const run = () => processRipScripts().then(resolve);
+    const run = () => processRipScripts().then(autoLaunch).then(resolve);
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => queueMicrotask(run));
     } else {

package/src/components.js

@@ -492,7 +492,8 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       }
       current = current[1];
     }
-    let raw = typeof current === 'string' ? current : (current instanceof String ? current.valueOf() : 'div');
+    let raw = typeof current === 'string' ? current : (current instanceof String ? current.valueOf() : null);
+    if (raw === null) return { tag: null, classes, id: undefined };
     // Split tag#id — e.g. "div#content" → tag: "div", id: "content"
     let [tag, id] = raw.split('#');
     if (!tag) tag = 'div';  // bare #id → div
@@ -1029,17 +1030,39 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     if (id) {
       this._createLines.push(`${elVar}.id = '${id}';`);
     }
+
+    // Defer class emission when selector classes exist so class: attributes merge
+    const prevClassArgs = this._pendingClassArgs;
+    const prevClassEl = this._pendingClassEl;
     if (classes.length > 0) {
-      if (isSvg) {
-        this._createLines.push(`${elVar}.setAttribute('class', '${classes.join(' ')}');`);
-      } else {
-        this._createLines.push(`${elVar}.className = '${classes.join(' ')}';`);
-      }
+      this._pendingClassArgs = [`'${classes.join(' ')}'`];
+      this._pendingClassEl = elVar;
     }
 
     if (tag === 'svg') this._svgDepth = (this._svgDepth || 0) + 1;
     this.appendChildren(elVar, args);
     if (tag === 'svg') this._svgDepth--;
+
+    // Emit final class: if only selector classes (no dynamic additions), set statically
+    if (classes.length > 0) {
+      if (this._pendingClassArgs.length === 1) {
+        if (isSvg) {
+          this._createLines.push(`${elVar}.setAttribute('class', '${classes.join(' ')}');`);
+        } else {
+          this._createLines.push(`${elVar}.className = '${classes.join(' ')}';`);
+        }
+      } else {
+        const combined = this._pendingClassArgs.join(', ');
+        if (isSvg) {
+          this._setupLines.push(`__effect(() => { ${elVar}.setAttribute('class', __clsx(${combined})); });`);
+        } else {
+          this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${combined}); });`);
+        }
+      }
+      this._pendingClassArgs = prevClassArgs;
+      this._pendingClassEl = prevClassEl;
+    }
+
     return elVar;
   };
 
@@ -1186,7 +1209,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           continue;
         }
 
-        if (BOOLEAN_ATTRS.has(key)) {
+        if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') {
+          if (this.hasReactiveDeps(value)) {
+            this._setupLines.push(`__effect(() => { ${elVar}.${key} = ${valueCode}; });`);
+          } else {
+            this._createLines.push(`${elVar}.${key} = ${valueCode};`);
+          }
+        } else if (BOOLEAN_ATTRS.has(key)) {
           if (this.hasReactiveDeps(value)) {
             this._setupLines.push(`__effect(() => { ${elVar}.toggleAttribute('${key}', !!${valueCode}); });`);
           } else {

package/src/grammar/grammar.rip

@@ -73,7 +73,7 @@ grammar =
     o 'ReactiveAssign'
     o 'ComputedAssign'
     o 'ReadonlyAssign'
-    o 'ReactAssign'
+    o 'Effect'
     o 'If'
     o 'Try'
     o 'While'
@@ -208,13 +208,13 @@ grammar =
   ]
 
   # Reactive effect (~>) — side effects that run when dependencies change
-  ReactAssign: [
-    o 'Assignable REACT_ASSIGN Expression'               , '["effect", 1, 3]'
-    o 'Assignable REACT_ASSIGN TERMINATOR Expression'    , '["effect", 1, 4]'
-    o 'Assignable REACT_ASSIGN INDENT Expression OUTDENT', '["effect", 1, 4]'
-    o 'REACT_ASSIGN Expression'                          , '["effect", null, 2]'
-    o 'REACT_ASSIGN TERMINATOR Expression'               , '["effect", null, 3]'
-    o 'REACT_ASSIGN INDENT Expression OUTDENT'           , '["effect", null, 3]'
+  Effect: [
+    o 'Assignable EFFECT Expression'               , '["effect", 1, 3]'
+    o 'Assignable EFFECT TERMINATOR Expression'    , '["effect", 1, 4]'
+    o 'Assignable EFFECT Block'                    , '["effect", 1, 3]'
+    o 'EFFECT Expression'                          , '["effect", null, 2]'
+    o 'EFFECT TERMINATOR Expression'               , '["effect", null, 3]'
+    o 'EFFECT Block'                               , '["effect", null, 2]'
   ]
 
   # ============================================================================
@@ -802,7 +802,7 @@ grammar =
     o 'EXPORT ReactiveAssign'                              , '["export", 2]'
     o 'EXPORT ComputedAssign'                              , '["export", 2]'
     o 'EXPORT ReadonlyAssign'                              , '["export", 2]'
-    o 'EXPORT ReactAssign'                                 , '["export", 2]'
+    o 'EXPORT Effect'                                 , '["export", 2]'
     o 'EXPORT DEFAULT Expression'                          , '["export-default", 3]'
     o 'EXPORT DEFAULT INDENT Object OUTDENT'               , '["export-default", 4]'
     o 'EXPORT EXPORT_ALL FROM String'                      , '["export-all", 4]'

package/src/grammar/lunar.rip

@@ -437,7 +437,7 @@ export install = (Generator) ->
     # Statement tokens handled by parseUnary (for 'break if done', 'return x unless err')
     @_exprHandledTokens.add 'STATEMENT'
     @_exprHandledTokens.add 'RETURN'
-    @_exprHandledTokens.add 'REACT_ASSIGN'
+    @_exprHandledTokens.add 'EFFECT'
 
   Generator::_findKeywordTokens = (type, dispatchName, handledTokens, visited) ->
     return if visited.has type.name
@@ -2271,7 +2271,7 @@ export install = (Generator) ->
     lines.push "  if (token === 'STATEMENT') { const v = tokenText; advance(); return v; }"
     lines.push "  if (token === 'RETURN') return parseReturn();"
     # Fire-and-forget effect (~> expr) — prefix form without left-hand side
-    lines.push "  if (token === 'REACT_ASSIGN') return parseReactAssign();"
+    lines.push "  if (token === 'EFFECT') return parseEffect();"
     lines.push "  throw new Error('Parse error: unexpected token ' + token + ' at line ' + ((tokenLoc && tokenLoc.r || 0) + 1));"
     lines.push "}"
     lines.join '\n'

package/src/lexer.js

@@ -1156,7 +1156,7 @@ export class Lexer {
     else if (val === '~=') tag = 'COMPUTED_ASSIGN';
     else if (val === ':=') tag = 'REACTIVE_ASSIGN';
     else if (val === '<=>') tag = 'BIND';
-    else if (val === '~>') tag = 'REACT_ASSIGN';
+    else if (val === '~>') tag = 'EFFECT';
     else if (val === '=!') tag = 'READONLY_ASSIGN';
     // Merge assignment: *config = {a: 1} → Object.assign(config, {a: 1})
     // Also supports *@ = props → Object.assign(this, props)