arrmatura 4.3.2 → 5.0.1

package/core/cnodes/elementary.ts

@@ -0,0 +1,45 @@
+import { Platform } from '../Platform';
+import { CNode } from '../CNode';
+import { compileNodes } from '../compileNode';
+import { Component } from '../Component';
+
+export class ElementComponent extends Component<CElementNode> {
+  get displayName(): string {
+    return this.node.tag;
+  }
+
+  createImplementation(initials: Hash): IComponentImplementation {
+    return Platform.instance.createElement(this.node.tag, initials, this);
+  }
+}
+
+export class TextElementComponent extends Component<CTextElementNode> {
+  createImplementation(initials: Hash) {
+    return Platform.instance.createTextElement(initials, this);
+  }
+}
+
+export class CElementNode extends CNode<ElementComponent> {
+  constructor(x: XmlNode) {
+    super();
+    this.tag = x.tag;
+    this.content = compileNodes(x.nodes);
+    this.compileAttributes(x.attrs);
+  }
+
+  get ComponentConstructor() {
+    return ElementComponent;
+  }
+}
+
+export class CTextElementNode extends CNode<TextElementComponent> {
+  constructor(x: XmlNode) {
+    super();
+    this.tag = x.tag;
+    this.compileAttributes(x.attrs);
+  }
+
+  get ComponentConstructor() {
+    return TextElementComponent;
+  }
+}

package/core/cnodes/iterations.ts

@@ -0,0 +1,94 @@
+import { CNode } from '../CNode';
+import { compileNodes } from '../compileNode';
+import { Component } from '../Component';
+
+class ForComponent extends Component<CForNode> {
+  pkHash: Hash<Datum> = {};
+
+  get displayName(): string {
+    return '🔹';
+  }
+
+  get content() {
+    const {
+      state: { each },
+    } = this;
+    const itemNode = this.node.itemNode;
+    const nodes: ComponentContent = new Map();
+    this.pkHash = {};
+    if (each?.length) {
+      if (!each.forEach) {
+        throw new Error('[ui:for] Items has no forEach() ' + each);
+      }
+      each.forEach((datum: Datum) => {
+        const id = datum.id;
+        if (id == null) {
+          console.error('ERROR: empty item id: ', datum);
+          return;
+        }
+        const pk = String(id);
+        if (this.pkHash[pk]) {
+          console.error('ERROR: duplicate item id: ' + pk, datum);
+          return;
+        }
+        this.pkHash[pk] = datum;
+        const inode = itemNode.cloneWithDatum(datum).addPropertyResolver(() => this.pkHash[pk], itemNode.itemName);
+        nodes.set(inode.uid, inode);
+      });
+    }
+    return nodes;
+  }
+}
+
+export class CForNode extends CNode<ForComponent> {
+  itemNode: CItemNode;
+  constructor(x: XmlNode, [itemName, prep, expr = prep]: string[]) {
+    super();
+    this.itemNode = new CItemNode(itemName, compileNodes([x]));
+    this.compileAttribute('each', '{:<'.includes(expr[0]) ? expr : `{${expr}}`);
+  }
+
+  get ComponentConstructor() {
+    return ForComponent;
+  }
+}
+
+class ItemComponent extends Component<CItemNode> {
+  get displayName(): string {
+    return '🔹';
+  }
+  get recontentScope(): Component {
+    return this;
+  }
+
+  emit(key: string, data: Delta): void {
+    return this.scope.emit(key, data);
+  }
+
+  get(propId: string) {
+    const iName: string = this.node.itemName;
+    const value = propId.startsWith(iName + '.') || propId === iName ? super.get(propId) : this.scope.get(propId);
+    // this.log(propId, value);
+    return value;
+  }
+}
+
+export class CItemNode extends CNode<ItemComponent> {
+  itemName: string;
+  constructor(itemName: string, content?: ComponentContent) {
+    super();
+    this.itemName = itemName;
+    this.content = content;
+  }
+
+  cloneWithDatum(datum: Datum) {
+    const uid = this.uid + '#' + datum.id;
+    return Object.assign(new CItemNode(this.itemName, this.content), {
+      uid,
+    });
+  }
+
+  get ComponentConstructor() {
+    return ItemComponent;
+  }
+}

package/core/cnodes/routing.ts

@@ -0,0 +1,25 @@
+import { CNode } from '../CNode';
+import { compileNode } from '../compileNode';
+import { Component } from '../Component';
+
+export class DynamicTagComponent extends Component<CDynamicTagNode> {
+  get content(): ComponentContent | undefined {
+    const { tag } = this.state;
+    const uid = this.node.uid + ':' + tag;
+    return new Map([[uid, Object.assign(compileNode(Object.assign(this.node.xml, { tag })), { uid })]]);
+  }
+}
+
+export class CDynamicTagNode extends CNode<DynamicTagComponent> {
+  xml: XmlNode & { tag: string };
+
+  constructor(xml: XmlNode, expr: string) {
+    super();
+    this.compileAttribute('tag', expr);
+    this.xml = xml;
+  }
+
+  get ComponentConstructor() {
+    return DynamicTagComponent;
+  }
+}

package/core/compileNode.ts

@@ -0,0 +1,39 @@
+import { CCompositeNode, CFragmentNode, CSlotNode } from './cnodes/composition';
+import { CDynamicTagNode } from './cnodes/routing';
+import { CElementNode, CTextElementNode } from './cnodes/elementary';
+import { CForNode } from './cnodes/iterations';
+import { CIfNode } from './cnodes/conditionals';
+
+export const compileNode = (x: XmlNode): INode => {
+  const { tag, attrs } = x;
+  const each = attrs?.['ui:for'];
+  if (each) {
+    delete attrs['ui:for'];
+    return new CForNode(x, String(each).trim().split(' '));
+  }
+  const when = attrs?.['ui:if'];
+  if (when) {
+    delete attrs['ui:if'];
+    return new CIfNode(x, String(when));
+  }
+  if (tag === 'ui:tag') {
+    const expr = attrs?.['tag'] || tag;
+    delete attrs?.['tag'];
+    return new CDynamicTagNode(x, String(expr));
+  }
+  if (tag === 'ui:slot') {
+    return new CSlotNode(x);
+  }
+  if (tag === 'ui:fragment') {
+    return new CFragmentNode(x);
+  }
+  if (tag === '#text') {
+    return new CTextElementNode(x);
+  }
+  if (tag[0].match(/[A-Z]/)) return new CCompositeNode(x);
+
+  return new CElementNode(x);
+};
+
+export const compileNodes = (x?: XmlNode[] | null): ComponentContent =>
+  new Map<Uid, INode>(x?.map(compileNode).map((c) => [c.uid, c]) || []);

package/core/expression.ts

@@ -0,0 +1,73 @@
+import { scalarParse } from 'scalar';
+
+const RE_SINGLE_PLACEHOLDER = /^\{([^}]+)\}$/;
+
+const RE_PLACEHOLDER = /\{([^}]+)\}/g;
+
+const withNoPipes = (_: unknown, v: unknown) => v;
+
+const splitExpression = (v: Expression) => {
+  return v.split('|').map((s) => s.trim());
+};
+
+export function withPipes(pipes: string[]) {
+  return !pipes.length
+    ? withNoPipes
+    : (c: IComponent, initialValue: unknown) => pipes.reduce((r, pk) => c.applyPipe(pk, r), initialValue);
+}
+
+export function compilePipeExpression(v: Expression) {
+  const [key, ...pipes] = splitExpression(v);
+  return { key, pipec: withPipes(pipes) };
+}
+
+function stringInterpolation(v: string, fnx: Array<(c: IComponent) => unknown> = []) {
+  const pattern = v.trim().replace(RE_PLACEHOLDER, (_: string, expr: string) => {
+    fnx.push(placeholder(expr));
+    return '{{' + (fnx.length - 1) + '}}';
+  });
+  return !fnx.length
+    ? (_: IComponent) => pattern
+    : (c: IComponent) =>
+        pattern
+          .replace(/\{\{(\d+)\}\}/g, (_: string, idx: string) => {
+            const r = fnx[Number(idx)](c);
+            return !r && r !== 0 ? '' : String(r);
+          })
+          .replace(/\s+/g, ' ');
+}
+
+function resourceExpression(expr: string) {
+  const { key, pipec } = compilePipeExpression(expr);
+  const intrpltn = stringInterpolation(key);
+  return !pipec.length ? (c: IComponent) => c.res(intrpltn(c)) : (c: IComponent) => pipec(c, c.res(intrpltn(c)));
+}
+
+function placeholder(expr: string) {
+  const { key, pipec } = compilePipeExpression(expr);
+  const fn =
+    key[0] === ':'
+      ? (
+          (k) => (c: IComponent) =>
+            c.res(k)
+        )(key.slice(1))
+      : (c: IComponent) => c.getFromScope(key);
+  return !pipec.length ? fn : (c: IComponent) => pipec(c, fn(c));
+}
+
+export function compileExpression(v: unknown) {
+  if (typeof v !== 'string') {
+    return () => v;
+  }
+  if (v[0] === ':') {
+    return resourceExpression(v.slice(1).trim());
+  }
+  if (!v.includes('{')) {
+    const vv = scalarParse(v);
+    return () => vv;
+  }
+  if (v.match(RE_SINGLE_PLACEHOLDER)) {
+    return placeholder(v.slice(1, -1).trim());
+  }
+  return stringInterpolation(v);
+}

package/core/index.ts

@@ -0,0 +1,2 @@
+export * from './Arrmatura';
+export * from './Platform';

package/core/register.ts

@@ -0,0 +1,43 @@
+import { compileNodes } from './compileNode';
+import { xmlParse } from 'xml';
+import { fnName } from './utils';
+
+export class ComponentDefinition {
+  tag: string;
+  template?: string;
+  Ctor: any;
+  $templateContent?: ComponentContent;
+
+  constructor({ tag, template, Ctor }: ComponentDefinitionInfo) {
+    this.tag = tag;
+    this.template = template;
+    this.Ctor = Ctor || function () {};
+  }
+
+  get content() {
+    return this.$templateContent || (this.$templateContent = compileNodes(xmlParse(this.template)));
+  }
+}
+
+export const REGISTRY = new Map<string, ComponentDefinition>();
+
+const notFound = (tag: string): ComponentDefinition =>
+  new ComponentDefinition({ tag, template: '<b>??' + tag + '??</b>' });
+
+const setInfo = (ctr: ComponentDefinitionInfo) => REGISTRY.set(ctr.tag, new ComponentDefinition(ctr));
+
+const registerType = (ctr: string | ComponentDefinitionInfo | Constructor) => {
+  if (typeof ctr === 'string') {
+    ctr.replace(/<component\s+id="(.+)">([\s\S]*?)<\/component>/gm, (_, tag, template) => {
+      setInfo({ tag, template: template.trim() });
+      return '';
+    });
+  } else {
+    setInfo(typeof ctr === 'function' ? { Ctor: ctr, tag: ctr.name || fnName(ctr) } : ctr);
+  }
+};
+
+export const registerTypes = (types?: Array<string | ComponentDefinitionInfo | Constructor>) =>
+  types?.forEach(registerType);
+
+export const getByTag = (tag: string) => REGISTRY.get(tag) || notFound(tag);

package/core/utils.ts

@@ -0,0 +1,25 @@
+import { nextId } from 'nextId';
+import { identity } from 'noop';
+import { attributesToString } from 'xml';
+
+export const applyValue = (value: any, fn = identity) => (value?.then ? value.then(fn) : fn(value));
+
+export const fnName = (ctor: object) => (/^function\s+([\w$]+)\s*\(/.exec(ctor.toString()) || [])[1] || nextId('C');
+
+export const methodName = (x: unknown, pre = '') => {
+  const s = `${x || ''}`;
+  return pre + s[0].toUpperCase() + s.slice(1);
+};
+
+export const stringifyState = (attrs?: object | Hash) => {
+  if (!attrs) {
+    return '';
+  }
+  const r: string[] = [];
+  Object.entries(attrs).forEach(([k, v]) => {
+    if (v) {
+      r.push(' ' + k + '="' + attributesToString(v) + '"');
+    }
+  });
+  return r.length ? r.join('') : '';
+};