glass-easel-miniprogram-adapter 0.1.0

package/src/types.ts

@@ -0,0 +1,85 @@
+import { DeepCopyKind, typeUtils as utils } from 'glass-easel'
+import type { DefinitionFilter, GeneralBehavior, Behavior } from './behavior'
+
+export { typeUtils as utils } from 'glass-easel'
+
+export const enum StyleIsolation {
+  Isolated = 'isolated',
+  ApplyShared = 'apply-shared',
+  Shared = 'shared',
+  PageIsolated = 'page-isolated',
+  PageApplyShared = 'page-apply-shared',
+  PageShared = 'page-shared',
+}
+
+export type ComponentStaticConfig = {
+  component?: boolean
+  usingComponents?: { [name: string]: string }
+  generics?: {
+    [name: string]: true | { default?: string }
+  }
+  placeholder?: { [name: string]: string }
+  styleIsolation?: StyleIsolation,
+  /** @obsolete */
+  addGlobalClass?: boolean,
+  pureDataPattern?: string,
+}
+
+export type ComponentDefinitionOptions = {
+  multipleSlots?: boolean
+  pureDataPattern?: RegExp,
+  virtualHost?: boolean,
+  dataDeepCopy?: DeepCopyKind,
+  propertyPassingDeepCopy?: DeepCopyKind,
+  propertyEarlyInit?: boolean,
+}
+
+type ComponentMethod = utils.ComponentMethod
+
+export type BehaviorDefinition<
+  TData extends utils.DataList,
+  TProperty extends utils.PropertyList,
+  TMethod extends utils.MethodList,
+> = {
+  behaviors?: Behavior<any, any, any, any>[],
+  properties?: TProperty,
+  data?: TData | (() => TData),
+  observers?:
+    ({
+      fields?: string,
+      observer: ComponentMethod,
+    })[]
+    | { [fields: string]: ComponentMethod }
+  methods?: TMethod,
+  created?: ComponentMethod,
+  attached?: ComponentMethod,
+  ready?: ComponentMethod,
+  moved?: ComponentMethod,
+  detached?: ComponentMethod,
+  lifetimes?: { [name: string]: ComponentMethod },
+  pageLifetimes?: { [name: string]: ComponentMethod },
+  relations?: utils.RelationParamsWithKey,
+  externalClasses?: string[],
+  definitionFilter?: DefinitionFilter,
+}
+
+export type ComponentDefinition<
+  TData extends utils.DataList,
+  TProperty extends utils.PropertyList,
+  TMethod extends utils.MethodList,
+  TComponentExport,
+> = {
+  options?: ComponentDefinitionOptions,
+  export?: () => TComponentExport,
+} & BehaviorDefinition<TData, TProperty, TMethod>
+
+export type GeneralComponentDefinition = ComponentDefinition<any, any, any, any>
+
+export type PageDefinition<
+  TData extends utils.DataList,
+  TExtraFields extends { [k: PropertyKey]: any },
+> = TExtraFields & {
+  options?: ComponentDefinitionOptions,
+  behaviors?: GeneralBehavior[],
+  data?: TData,
+}

package/src/utils.ts

@@ -0,0 +1,3 @@
+export const guid = (): string => Math.floor((1 + Math.random()) * 0x100000000)
+  .toString(16)
+  .slice(1)

package/tests/base/env.ts

@@ -0,0 +1,20 @@
+/* eslint-disable no-new-func */
+/* eslint-disable @typescript-eslint/no-implied-eval */
+
+import * as glassEasel from 'glass-easel'
+import { TmplGroup } from 'glass-easel-template-compiler'
+
+export const tmpl = (src: string): glassEasel.template.ComponentTemplate => {
+  const group = new TmplGroup()
+  group.addTmpl('', src)
+  const genObjectSrc = `return ${group.getTmplGenObjectGroups()}`
+  group.free()
+  // console.info(genObjectSrc)
+  const genObjectGroupList = (new Function(genObjectSrc))() as
+    { [key: string]: any }
+  return {
+    groupList: genObjectGroupList,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    content: genObjectGroupList['']!,
+  }
+}

package/tests/data_update.test.ts

@@ -0,0 +1,92 @@
+import * as glassEasel from 'glass-easel'
+import { tmpl } from './base/env'
+import {
+  MiniProgramEnv,
+} from '../src'
+
+const domHtml = (elem: glassEasel.Element): string => {
+  const domElem = elem.getBackendElement() as unknown as Element
+  return domElem.innerHTML
+}
+
+describe('data update', () => {
+  test('various data update', () => {
+    const env = new MiniProgramEnv()
+    const codeSpace = env.createCodeSpace('', true)
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {})
+    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+      <div wx:for="{{arr}}">{{item}}</div>
+      <span>{{obj.sub}}</span>
+    `))
+    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
+      Component()
+        .data(() => ({
+          arr: [1, 2, 3],
+          obj: {
+            sub: false,
+          },
+        }))
+        .lifetime('attached', function () {
+          this.groupUpdates(() => {
+            this.spliceArrayDataOnPath(['arr'], 1, 1, [4, 5])
+            this.replaceDataOnPath(['obj', 'sub'], true)
+          })
+          // eslint-disable-next-line no-use-before-define
+          expect(domHtml(root.getComponent()))
+            .toBe('<div>1</div><div>4</div><div>5</div><div>3</div><span>true</span>')
+          this.groupSetData(() => {
+            this.updateData({
+              arr: [123],
+            })
+          })
+          // eslint-disable-next-line no-use-before-define
+          expect(domHtml(root.getComponent()))
+            .toBe('<div>1</div><div>4</div><div>5</div><div>3</div><span>true</span>')
+          this.applyDataUpdates()
+          // eslint-disable-next-line no-use-before-define
+          expect(domHtml(root.getComponent()))
+            .toBe('<div>123</div><span>true</span>')
+        })
+        .register()
+    })
+
+    const ab = env.associateBackend()
+    const root = ab.createRoot('body', codeSpace, 'path/to/comp')
+    glassEasel.Element.pretendAttached(root.getComponent())
+    expect(domHtml(root.getComponent())).toBe('<div>123</div><span>true</span>')
+  })
+
+  test('setData callback', () => new Promise((resolve) => {
+    const env = new MiniProgramEnv()
+    const codeSpace = env.createCodeSpace('', true)
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {})
+    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+      <span>{{a}}</span>
+    `))
+    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
+      Component()
+        .data(() => ({
+          a: 123,
+        }))
+        .init(function ({ setData, lifetime }) {
+          lifetime('attached', () => {
+            setData({ a: 789 }, () => {
+              this.setData({ a: 456 }, () => {
+                // eslint-disable-next-line no-use-before-define
+                expect(domHtml(root.getComponent())).toBe('<span>456</span>')
+                resolve(undefined)
+              })
+            })
+          })
+        })
+        .register()
+    })
+
+    const ab = env.associateBackend()
+    const root = ab.createRoot('body', codeSpace, 'path/to/comp')
+    glassEasel.Element.pretendAttached(root.getComponent())
+    expect(domHtml(root.getComponent())).toBe('<span>789</span>')
+  }))
+})

package/tests/env.test.ts

@@ -0,0 +1,141 @@
+import * as glassEasel from 'glass-easel'
+import { tmpl } from './base/env'
+import {
+  MiniProgramEnv,
+} from '../src'
+
+const domHtml = (elem: glassEasel.Element): string => {
+  const domElem = elem.getBackendElement() as unknown as Element
+  return domElem.innerHTML
+}
+
+describe('env', () => {
+  test('add global components', () => {
+    const env = new MiniProgramEnv()
+    const globalCodeSpace = env.getGlobalCodeSpace()
+    globalCodeSpace.getComponentSpace().define('external')
+      .options({
+        virtualHost: true,
+      })
+      .template(tmpl(`
+        <span class="inner" />
+      `))
+      .registerComponent()
+    globalCodeSpace.getComponentSpace().exportComponent('external', 'external')
+    const codeSpace = env.createCodeSpace('', true)
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {
+      usingComponents: {
+        external: 'external',
+      },
+    })
+
+    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+      <div class="outer">
+        <external />
+      </div>
+    `))
+
+    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
+      Component().register()
+    })
+
+    const backend = new glassEasel.domlikeBackend.CurrentWindowBackendContext()
+    const ab = env.associateBackend(backend)
+    const root = ab.createRoot('body', codeSpace, 'path/to/comp')
+    expect(domHtml(root.getComponent())).toBe('<div class="outer"><span class="inner"></span></div>')
+  })
+
+  test('add global components', () => {
+    const env = new MiniProgramEnv()
+    const globalCodeSpace = env.getGlobalCodeSpace()
+    globalCodeSpace.getComponentSpace().define('external')
+      .options({
+        virtualHost: true,
+      })
+      .template(tmpl(`
+        <span class="inner" />
+      `))
+      .registerComponent()
+    globalCodeSpace.getComponentSpace().exportComponent('external', 'external')
+    const codeSpace = env.createCodeSpace('', true)
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {
+      usingComponents: {
+        external: 'external',
+      },
+    })
+
+    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+      <div class="outer">
+        <external />
+      </div>
+    `))
+
+    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
+      Component().register()
+    })
+
+    const backend = new glassEasel.domlikeBackend.CurrentWindowBackendContext()
+    const ab = env.associateBackend(backend)
+    const root = ab.createRoot('body', codeSpace, 'path/to/comp')
+    expect(domHtml(root.getComponent())).toBe('<div class="outer"><span class="inner"></span></div>')
+  })
+
+  test('multiple code spaces', () => {
+    const env = new MiniProgramEnv()
+    const codeSpace = env.createCodeSpace('', true)
+    const pluginCodeSpace1 = env.createCodeSpace('plugin-1-id', false, {
+      'outer-comp-1': 'inner-comp-1',
+      'outer-comp-11': 'inner-comp-1',
+    })
+    const pluginCodeSpace2 = env.createCodeSpace('plugin-2-id', false, {
+      'outer-comp-2': 'inner-comp-2',
+    })
+    expect(env.getCodeSpace('plugin-1-id')).toBe(pluginCodeSpace1)
+    expect(env.getCodeSpace('plugin-2-id')).toBe(pluginCodeSpace2)
+    expect(pluginCodeSpace1.isMainSpace()).toBe(false)
+    codeSpace.importCodeSpace('plugin-1-id', 'plugin-1')
+    codeSpace.importCodeSpace('plugin-2-id', undefined, true)
+    expect(codeSpace.isMainSpace()).toBe(true)
+
+    pluginCodeSpace1.addCompiledTemplate('inner-comp-1', tmpl('A'))
+    pluginCodeSpace1.componentEnv('inner-comp-1', ({ Component }) => {
+      Component().register()
+    })
+
+    pluginCodeSpace2.addCompiledTemplate('inner-comp-2', tmpl('B'))
+    pluginCodeSpace2.componentEnv('inner-comp-2', ({ Component }) => {
+      Component().register()
+    })
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {
+      usingComponents: {
+        'c-a': 'plugin://plugin-1/outer-comp-1',
+        'c-aa': 'plugin://plugin-1/outer-comp-11',
+        'i-a': 'plugin-private://plugin-1-id/inner-comp-1',
+        'i-b': 'plugin://plugin-2/outer-comp-2',
+        'c-b': 'plugin-private://plugin-2-id/inner-comp-2',
+      },
+    })
+    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+      <c-a />
+      <c-aa />
+      <i-a />
+      <i-b />
+      <c-b />
+    `))
+    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
+      Component().register()
+    })
+
+    codeSpace.componentEnv('', ({ Component }) => {
+      Component().register()
+    })
+
+    const backend = new glassEasel.domlikeBackend.CurrentWindowBackendContext()
+    const ab = env.associateBackend(backend)
+    const root = ab.createRoot('body', codeSpace, 'path/to/comp')
+    expect(domHtml(root.getComponent())).toBe('<c-a>A</c-a><c-aa>A</c-aa><i-a></i-a><i-b></i-b><c-b>B</c-b>')
+  })
+})