Add JS Expression to Templating

RELEASE-NOTES.md

@@ -4,6 +4,12 @@ This is a pre-release version and APIs will change quickly. Before `1.0` release
 
 Please note after `1.0` Semver will be followed using normal protocols.
 
+
+# Version 0.4.0
+
+### Improvements
+* Templates now will evaluate javascript expressions like `{index + 1}`, {getThing(foo, bar)} and even nested objects like `{getValue { foo: 'baz'} }`
+
 # Version 0.3.1
 
 ### Bugs

docs/src/components/Test/component.css

@@ -0,0 +1,10 @@
+table {
+  border-collapse: collapse;
+  th,
+  td {
+    border: var(--solid-border);
+    padding: 5px 10px;
+    text-align: left;
+    max-width: max-content;
+  }
+}

docs/src/components/Test/component.html

@@ -1 +1,99 @@
-{firstSetting} {secondSetting}
+<h4>Data Context</h4>
+<table class="group">
+  <thead>
+    <th>Name</th>
+    <th>Value</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>value</td>
+      <td>{value}</td>
+    </tr>
+    <tr>
+      <td>now</td>
+      <td>{now}</td>
+    </tr>
+    <tr>
+      <td>timezone</td>
+      <td>{timezone}</td>
+    </tr>
+  </tbody>
+</table>
+
+<h4>Expressions</h4>
+<table class="group">
+  <thead>
+    <th>Example</th>
+    <th>Expression</th>
+    <th>Result</th>
+    <th>Should Match</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Calling method in data context with object using spaced arguments</td>
+      <td>{#html "formatDate now 'h:mm:ss a' { timezone: timezone }"}</td>
+      <td>{ formatDate now 'h:mm:ss a' { timezone: timezone } }</td>
+      <td>Current time PST</td>
+    </tr>
+    <tr>
+      <td>Calling helper method in data context with js arguments</td>
+      <td>{#html "formatDate(now, 'h:mm:ss a', { timezone: timezone })"}</td>
+      <td>{ formatDate(now, 'h:mm:ss a', { timezone: timezone }) }</td>
+      <td>Current time PST</td>
+    </tr>
+    <tr>
+      <td>Calling helper method with inline object definition</td>
+      <td>{#html 'classMap { one: true, two: true, three: now }' }</td>
+      <td>{ classMap { one: true, two: true, three: now } }</td>
+      <td>one two three</td>
+    </tr>
+    <tr>
+      <td>Calling method with inline array definition</td>
+      <td>join ['1', '2', '3'] ' and '</td>
+      <td>{ join ['1', '2', '3'] ' and '}</td>
+      <td>1 and 2 and 3</td>
+    </tr>
+    <tr>
+      <td>Outputting value from data context</td>
+      <td>value</td>
+      <td>{value}</td>
+      <td>0</td>
+    </tr>
+    <tr>
+      <td>Inline addition</td>
+      <td>value + 1</td>
+      <td>{value + 1}</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>Inline arithmetic</td>
+      <td>value + 2 * 5</td>
+      <td>{value + 2 * 5}</td>
+      <td>11</td>
+    </tr>
+    <tr>
+      <td>Inline arithmetic with order of operations</td>
+      <td>(value + 2) * 5</td>
+      <td>{(value + 2) * 5}</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <td>Calling a method with spaced arguments</td>
+      <td>addOne value</td>
+      <td>{addOne value}</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>Calling a method with js arguments and inline addition</td>
+      <td>addOne(value + 1)</td>
+      <td>{addOne(value + 1)}</td>
+      <td>3</td>
+    </tr>
+    <tr>
+      <td>Calling a method with inline object</td>
+      <td>getValue {one: 'two'} 'one'</td>
+      <td>{getValue {one: 'two'} 'one'}</td>
+      <td>two</td>
+    </tr>
+  </tbody>
+</table>

docs/src/components/Test/component.js

@@ -1,24 +1,25 @@
-import { defineComponent } from '@semantic-ui/component';
-
-import css from './component.css?raw';
-import template from './component.html?raw';
+import { defineComponent, getText } from '@semantic-ui/component';
 
+const css = await getText('./component.css');
+const template = await getText('./component.html');
 
 const settings = {
-  firstSetting: true,
-  secondSetting: false,
+  value: 1,
+  now: new Date(),
+  timezone: 'PST'
 };
 
 const createComponent = ({self, data, settings}) => ({
-  initialize() {
-    console.log('data is', data);
-    console.log('first', settings.firstSetting);
-    console.log('second', settings.secondSetting);
+  addOne(value, value2 = 0) {
+    return value + value2 + 1;
+  },
+  getValue(obj, prop) {
+    return obj[prop];
   }
 });
 
-export const SettingTest = defineComponent({
-  tagName: 'setting-test',
+export const TestComponent = defineComponent({
+  tagName: 'test-component',
   template,
   css,
   settings,

docs/src/components/Test/index.js

@@ -0,0 +1,4 @@
+import { TestComponent } from './component.js';
+
+
+export { TestComponent };

docs/src/content/examples/expressions.mdx

@@ -0,0 +1,9 @@
+---
+title: 'Expressions'
+exampleType: 'component'
+category: 'Components'
+subcategory: 'UI Components'
+tags: ['component', 'getting-started']
+description: An example of various expressions and their results
+selectedFile: 'component.html'
+---

docs/src/examples/expressions/component.css

@@ -0,0 +1,10 @@
+table {
+  border-collapse: collapse;
+  th,
+  td {
+    border: var(--solid-border);
+    padding: 5px 10px;
+    text-align: left;
+    max-width: max-content;
+  }
+}

docs/src/examples/expressions/component.html

@@ -0,0 +1,99 @@
+<h4>Data Context</h4>
+<table class="group">
+  <thead>
+    <th>Name</th>
+    <th>Value</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>value</td>
+      <td>{value}</td>
+    </tr>
+    <tr>
+      <td>now</td>
+      <td>{now}</td>
+    </tr>
+    <tr>
+      <td>timezone</td>
+      <td>{timezone}</td>
+    </tr>
+  </tbody>
+</table>
+
+<h4>Expressions</h4>
+<table class="group">
+  <thead>
+    <th>Example</th>
+    <th>Expression</th>
+    <th>Result</th>
+    <th>Should Match</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Calling method in data context with object using spaced arguments</td>
+      <td>{#html "formatDate now 'h:mm:ss a' { timezone: timezone }"}</td>
+      <td>{ formatDate now 'h:mm:ss a' { timezone: timezone } }</td>
+      <td>Current time PST</td>
+    </tr>
+    <tr>
+      <td>Calling helper method in data context with js arguments</td>
+      <td>{#html "formatDate(now, 'h:mm:ss a', { timezone: timezone })"}</td>
+      <td>{ formatDate(now, 'h:mm:ss a', { timezone: timezone }) }</td>
+      <td>Current time PST</td>
+    </tr>
+    <tr>
+      <td>Calling helper method with inline object definition</td>
+      <td>{#html 'classMap { one: true, two: true, three: now }' }</td>
+      <td>{ classMap { one: true, two: true, three: now } }</td>
+      <td>one two three</td>
+    </tr>
+    <tr>
+      <td>Calling method with inline array definition</td>
+      <td>join ['1', '2', '3'] ' and '</td>
+      <td>{ join ['1', '2', '3'] ' and '}</td>
+      <td>1 and 2 and 3</td>
+    </tr>
+    <tr>
+      <td>Outputting value from data context</td>
+      <td>value</td>
+      <td>{value}</td>
+      <td>0</td>
+    </tr>
+    <tr>
+      <td>Inline addition</td>
+      <td>value + 1</td>
+      <td>{value + 1}</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>Inline arithmetic</td>
+      <td>value + 2 * 5</td>
+      <td>{value + 2 * 5}</td>
+      <td>11</td>
+    </tr>
+    <tr>
+      <td>Inline arithmetic with order of operations</td>
+      <td>(value + 2) * 5</td>
+      <td>{(value + 2) * 5}</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <td>Calling a method with spaced arguments</td>
+      <td>addOne value</td>
+      <td>{addOne value}</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>Calling a method with js arguments and inline addition</td>
+      <td>addOne(value + 1)</td>
+      <td>{addOne(value + 1)}</td>
+      <td>3</td>
+    </tr>
+    <tr>
+      <td>Calling a method with inline object</td>
+      <td>getValue {one: 'two'} 'one'</td>
+      <td>{getValue {one: 'two'} 'one'}</td>
+      <td>two</td>
+    </tr>
+  </tbody>
+</table>

docs/src/examples/expressions/component.js

@@ -0,0 +1,27 @@
+import { defineComponent, getText } from '@semantic-ui/component';
+
+const css = await getText('./component.css');
+const template = await getText('./component.html');
+
+const settings = {
+  value: 1,
+  now: new Date(),
+  timezone: 'PST'
+};
+
+const createComponent = ({self, data, settings}) => ({
+  addOne(value, value2 = 0) {
+    return value + value2 + 1;
+  },
+  getValue(obj, prop) {
+    return obj[prop];
+  }
+});
+
+export const TestComponent = defineComponent({
+  tagName: 'test-component',
+  template,
+  css,
+  settings,
+  createComponent
+});

docs/src/pages/test.astro

@@ -1,30 +1,12 @@
 ---
 import Body from '../layouts/Body.astro';
+import TopBar from '@components/TopBar.astro';
 
-import NavMenu from '@components/NavMenu/NavMenu.js';
+import TopbarMenu from '@components/TopbarMenu/TopbarMenu.js';
+import {TestComponent} from '@components/Test/';
 const menu = [];
 ---
 <Body padded>
-  <script>
-    import { ReactiveVar, Reaction } from '@semantic-ui/reactivity';
-    const counter = new ReactiveVar(0);
-
-    const isEven = () => Reaction.guard(() => {
-      return (counter.get() % 2 === 0);
-    });
-
-    Reaction.create((comp) => {
-      if(isEven()) {
-        console.log(`${counter.peek()} is even`);
-      }
-    });
-
-    counter.set(1); // No output guard is same
-    Reaction.flush();
-    counter.set(2); // Output
-    Reaction.flush();
-    counter.set(3); // No output guard is same
-
-
-  </script>
+  <TopbarMenu client:only></TopbarMenu>
+  <TestComponent></TestComponent>
 </Body>

packages/component/src/define-component.js

@@ -37,6 +37,7 @@ export const defineComponent = ({
   renderingEngine,
 } = {}) => {
 
+
   // AST shared across instances
   if(!ast) {
     const compiler = new TemplateCompiler(template);