rip-lang 3.10.10 → 3.10.12

package/docs/index.html

@@ -520,8 +520,9 @@
   <div class="tabs">
     <button class="tab active" data-tab="compiler"><span class="tab-full">Live Compiler</span><span class="tab-short">Compiler</span></button>
     <button class="tab" data-tab="repl"><span class="tab-full">REPL Console</span><span class="tab-short">REPL</span></button>
-    <button class="tab" data-tab="demo">Demo</button>
     <button class="tab" data-tab="example">Example</button>
+    <button class="tab" data-tab="sierpinski">Sierpinski</button>
+    <button class="tab" data-tab="demo" title="Opens in new tab">Demo ⧉</button>
   </div>
 
   <!-- Content -->
@@ -600,9 +601,9 @@
       </div>
     </div>
 
-    <!-- Demo Pane -->
-    <div class="pane" id="demo-pane">
-      <iframe id="demo-iframe" style="width: 100%; height: 100%; border: none;"></iframe>
+    <!-- Sierpinski Pane -->
+    <div class="pane" id="sierpinski-pane">
+      <iframe id="sierpinski-iframe" style="width: 100%; height: 100%; border: none;"></iframe>
     </div>
 
     <!-- Example Pane -->
@@ -1124,10 +1125,13 @@
     # Tab Switching
     # ====================================================================
 
-    demoLoaded = false
+    sierpinskiLoaded = false
     exampleLoaded = false
 
     def switchToTab(tabName)
+      if tabName is 'demo'
+        window.open 'https://shreeve.github.io/rip-lang/results/', '_blank'
+        return
       window.location.hash = tabName
       document.querySelectorAll('.tab').forEach (t) -> t.classList.remove 'active'
       document.querySelector(".tab[data-tab='#{tabName}']").classList.add 'active'
@@ -1139,10 +1143,10 @@
       else if tabName is 'compiler'
         setTheme! themeSelect.value
         compileCode()
-      else if tabName is 'demo'
-        unless demoLoaded
-          document.getElementById('demo-iframe').src = 'sierpinski.html'
-          demoLoaded = true
+      else if tabName is 'sierpinski'
+        unless sierpinskiLoaded
+          document.getElementById('sierpinski-iframe').src = 'sierpinski.html'
+          sierpinskiLoaded = true
       else if tabName is 'example'
         unless exampleLoaded
           document.getElementById('example-iframe').src = 'example/'
@@ -1153,7 +1157,7 @@
 
     window.addEventListener 'hashchange', ->
       hash = window.location.hash.slice 1
-      switchToTab hash if hash is 'compiler' or hash is 'repl' or hash is 'demo' or hash is 'example'
+      switchToTab hash if hash is 'compiler' or hash is 'repl' or hash is 'sierpinski' or hash is 'example'
 
     # ====================================================================
     # Resizable Panes
@@ -1471,7 +1475,7 @@
 
     # Initialize from URL hash (default to compiler)
     initialTab = window.location.hash.slice 1
-    if initialTab is 'compiler' or initialTab is 'repl' or initialTab is 'demo' or initialTab is 'example'
+    if initialTab is 'compiler' or initialTab is 'repl' or initialTab is 'sierpinski' or initialTab is 'example'
       switchToTab! initialTab
     else
       compileCode()

package/docs/results/index.html

@@ -566,8 +566,10 @@ body {
 .gauge__value { font-size: 18px; color: white; bottom: 26px; }
 .gauge__units { font-size: 13px; color: rgba(255,255,255,.9); bottom: 13px; }
 
+@page { size: letter; margin: 0; }
+
 @media print {
-  body { background: white; }
+  body { margin: 0; background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
 
   .header, .sidebar, .drawer, .drawer-overlay, .btn-primary,
   .settings__section { display: none !important; }
@@ -578,16 +580,15 @@ body {
   .brochure { width: 100%; box-shadow: none; }
 
   .brochure__page {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0; left: 0;
-    margin: auto;
+    width: 8.5in;
+    min-height: 11in;
     border: none;
-    page-break-before: always;
+    overflow: hidden;
+    break-before: page;
+    break-inside: avoid;
   }
 
-  .brochure__page:first-child { page-break-before: auto; }
+  .brochure__page:first-child { break-before: auto; }
 }
   </style>
 </head>
@@ -610,7 +611,7 @@ export Home = component
   gender := 'Male'
 
   history := [
-    date: '2022-10'
+    date: "#{new Date().getFullYear()}-#{String(new Date().getMonth() + 1).padStart(2, '0')}"
     triglycerides: 181
     hdlCholesterol: 44
     totalCholesterol: 177
@@ -815,6 +816,17 @@ export Settings = component
             label "Hemoglobin A1c (%)"
             input type: 'number', step: '0.1', value <=> history[0].a1c
 
+      if history?[0]?.waistCircumference
+        .settings__section
+          .settings__heading "Physical Measurements"
+          .settings__fields
+            .settings__field
+              label "Waist Circumference (in)"
+              input type: 'number', value <=> history[0].waistCircumference
+            .settings__field
+              label "Blood Pressure (mm/Hg)"
+              input type: 'text', value <=> history[0].bloodPressure
+
       button.btn-primary "Print PDF"
         @click: -> window.print()
 </script>
@@ -914,9 +926,10 @@ export Summary = component
     "#{mo}/#{dy}/#{yr}"
 
   historyDate ~=
-    return '' unless history and history[0] and history[0].date
-    parts = history[0].date.split('-')
-    "#{parts[1]}/#{parts[0]}"
+    return '' unless history?[0]?.date
+    months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
+    [yr, mo] = history[0].date.split('-')
+    "#{months[parseInt(mo, 10) - 1]} #{yr}"
 
   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>'
@@ -993,11 +1006,11 @@ export DetailPage = component
     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>'
+    utensils: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>'
+    drop:     '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"/></svg>'
+    walk:     '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><path d="m9 20 3-6 3 6"/><path d="m6 8 6 2 6-2"/><path d="M12 10v4"/></svg>'
+    doctor:   '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 2v2"/><path d="M5 2v2"/><path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"/><path d="M8 15a6 6 0 0 0 12 0v-3"/><circle cx="20" cy="10" r="2"/></svg>'
+    smile:    '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" 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>'

package/package.json

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

package/src/compiler.js

@@ -371,7 +371,7 @@ export class CodeGenerator {
       return;
     }
 
-    if (head === 'def' || head === '->' || head === '=>') return;
+    if (head === 'def' || head === '->' || head === '=>' || head === 'effect') return;
 
     if (head === 'if') {
       let [condition, thenBranch, elseBranch] = rest;
@@ -423,7 +423,7 @@ export class CodeGenerator {
         collect(value);
         return;
       }
-      if (head === 'def' || head === '->' || head === '=>') return;
+      if (head === 'def' || head === '->' || head === '=>' || head === 'effect') return;
       if (head === 'try') {
         collect(rest[0]);
         if (rest.length >= 2 && Array.isArray(rest[1]) && rest[1].length === 2 && rest[1][0] !== 'block') {
@@ -1110,8 +1110,7 @@ export class CodeGenerator {
     this.usesReactivity = true;
     let bodyCode;
     if (this.is(body, 'block')) {
-      let stmts = this.withIndent(() => this.formatStatements(body.slice(1)));
-      bodyCode = `{\n${stmts.join('\n')}\n${this.indent()}}`;
+      bodyCode = this.generateFunctionBody(body);
     } else if ((this.is(body, '->') || this.is(body, '=>'))) {
       let fnCode = this.generate(body, 'value');
       if (target) return `const ${str(target) ?? this.generate(target, 'value')} = __effect(${fnCode})`;

package/src/components.js

@@ -688,8 +688,14 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     // Effects
     for (const effect of effects) {
       const effectBody = effect[2];
-      const effectCode = this.generateInComponent(effectBody, 'value');
-      lines.push(`    __effect(() => { ${effectCode}; });`);
+      if (this.is(effectBody, 'block') && effectBody.length > 2) {
+        const transformed = this.transformComponentMembers(effectBody);
+        const body = this.generateFunctionBody(transformed, [], true);
+        lines.push(`    __effect(() => ${body});`);
+      } else {
+        const effectCode = this.generateInComponent(effectBody, 'value');
+        lines.push(`    __effect(() => { ${effectCode}; });`);
+      }
     }
 
     lines.push('  }');