glass-easel-miniprogram-adapter 0.1.1 → 0.2.0

package/src/types.ts

@@ -15,23 +15,23 @@ export const enum StyleIsolation {
 export type ComponentStaticConfig = {
   component?: boolean
   usingComponents?: { [name: string]: string }
-  generics?: {
+  componentGenerics?: {
     [name: string]: true | { default?: string }
   }
-  placeholder?: { [name: string]: string }
-  styleIsolation?: StyleIsolation,
+  componentPlaceholder?: { [name: string]: string }
+  styleIsolation?: StyleIsolation
   /** @obsolete */
-  addGlobalClass?: boolean,
-  pureDataPattern?: string,
+  addGlobalClass?: boolean
+  pureDataPattern?: string
 }
 
 export type ComponentDefinitionOptions = {
   multipleSlots?: boolean
-  pureDataPattern?: RegExp,
-  virtualHost?: boolean,
-  dataDeepCopy?: DeepCopyKind,
-  propertyPassingDeepCopy?: DeepCopyKind,
-  propertyEarlyInit?: boolean,
+  pureDataPattern?: RegExp
+  virtualHost?: boolean
+  dataDeepCopy?: DeepCopyKind
+  propertyPassingDeepCopy?: DeepCopyKind
+  propertyEarlyInit?: boolean
 }
 
 type ComponentMethod = utils.ComponentMethod
@@ -41,26 +41,26 @@ export type BehaviorDefinition<
   TProperty extends utils.PropertyList,
   TMethod extends utils.MethodList,
 > = {
-  behaviors?: Behavior<any, any, any, any>[],
-  properties?: TProperty,
-  data?: TData | (() => TData),
+  behaviors?: Behavior<any, any, any, any>[]
+  properties?: TProperty
+  data?: TData | (() => TData)
   observers?:
-    ({
-      fields?: string,
-      observer: ComponentMethod,
-    })[]
+    | {
+        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,
+  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<
@@ -69,8 +69,8 @@ export type ComponentDefinition<
   TMethod extends utils.MethodList,
   TComponentExport,
 > = {
-  options?: ComponentDefinitionOptions,
-  export?: () => TComponentExport,
+  options?: ComponentDefinitionOptions
+  export?: () => TComponentExport
 } & BehaviorDefinition<TData, TProperty, TMethod>
 
 export type GeneralComponentDefinition = ComponentDefinition<any, any, any, any>
@@ -79,7 +79,7 @@ export type PageDefinition<
   TData extends utils.DataList,
   TExtraFields extends { [k: PropertyKey]: any },
 > = TExtraFields & {
-  options?: ComponentDefinitionOptions,
-  behaviors?: GeneralBehavior[],
-  data?: TData,
+  options?: ComponentDefinitionOptions
+  behaviors?: GeneralBehavior[]
+  data?: TData
 }

package/src/utils.ts

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

package/tests/base/env.ts

@@ -10,8 +10,7 @@ export const tmpl = (src: string): glassEasel.template.ComponentTemplate => {
   const genObjectSrc = `return ${group.getTmplGenObjectGroups()}`
   group.free()
   // console.info(genObjectSrc)
-  const genObjectGroupList = (new Function(genObjectSrc))() as
-    { [key: string]: any }
+  const genObjectGroupList = new Function(genObjectSrc)() as { [key: string]: any }
   return {
     groupList: genObjectGroupList,
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

package/tests/data_update.test.ts

@@ -1,8 +1,6 @@
 import * as glassEasel from 'glass-easel'
 import { tmpl } from './base/env'
-import {
-  MiniProgramEnv,
-} from '../src'
+import { MiniProgramEnv } from '../src'
 
 const domHtml = (elem: glassEasel.Element): string => {
   const domElem = elem.getBackendElement() as unknown as Element
@@ -15,10 +13,13 @@ describe('data update', () => {
     const codeSpace = env.createCodeSpace('', true)
 
     codeSpace.addComponentStaticConfig('path/to/comp', {})
-    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+    codeSpace.addCompiledTemplate(
+      'path/to/comp',
+      tmpl(`
       <div wx:for="{{arr}}">{{item}}</div>
       <span>{{obj.sub}}</span>
-    `))
+    `),
+    )
     codeSpace.componentEnv('path/to/comp', ({ Component }) => {
       Component()
         .data(() => ({
@@ -33,20 +34,21 @@ describe('data update', () => {
             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>')
+          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>')
+          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>')
+          expect(domHtml(root.getComponent())).toBe('<div>123</div><span>true</span>')
         })
         .register()
     })
@@ -57,36 +59,40 @@ describe('data update', () => {
     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)
+  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(`
+      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)
+    `),
+      )
+      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()
-    })
+          .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>')
-  }))
+      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

@@ -1,8 +1,6 @@
 import * as glassEasel from 'glass-easel'
 import { tmpl } from './base/env'
-import {
-  MiniProgramEnv,
-} from '../src'
+import { MiniProgramEnv } from '../src'
 
 const domHtml = (elem: glassEasel.Element): string => {
   const domElem = elem.getBackendElement() as unknown as Element
@@ -13,16 +11,20 @@ describe('env', () => {
   test('add global components', () => {
     const env = new MiniProgramEnv()
     const globalCodeSpace = env.getGlobalCodeSpace()
-    globalCodeSpace.getComponentSpace().define('external')
+    const def = globalCodeSpace
+      .getComponentSpace()
+      .define('external')
       .options({
         virtualHost: true,
       })
-      .template(tmpl(`
+      .template(
+        tmpl(`
         <span class="inner" />
-      `))
+      `),
+      )
       .registerComponent()
-    globalCodeSpace.getComponentSpace().exportComponent('external', 'external')
     const codeSpace = env.createCodeSpace('', true)
+    codeSpace.getComponentSpace().setGlobalUsingComponent('external', def)
 
     codeSpace.addComponentStaticConfig('path/to/comp', {
       usingComponents: {
@@ -30,11 +32,14 @@ describe('env', () => {
       },
     })
 
-    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+    codeSpace.addCompiledTemplate(
+      'path/to/comp',
+      tmpl(`
       <div class="outer">
         <external />
       </div>
-    `))
+    `),
+    )
 
     codeSpace.componentEnv('path/to/comp', ({ Component }) => {
       Component().register()
@@ -43,43 +48,33 @@ describe('env', () => {
     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>')
+    expect(domHtml(root.getComponent())).toBe(
+      '<div class="outer"><span class="inner"></span></div>',
+    )
   })
 
-  test('add global components', () => {
+  test('using behaviors', () => {
     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.addComponentStaticConfig('path/to/comp', {})
 
-    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
-      <div class="outer">
-        <external />
-      </div>
-    `))
+    codeSpace.addCompiledTemplate(
+      'path/to/comp',
+      tmpl(`
+        <div>{{ num }}</div>
+      `),
+    )
 
-    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
-      Component().register()
+    codeSpace.componentEnv('path/to/comp', ({ Behavior, Component }) => {
+      const beh = Behavior({ data: { num: 123 } })
+      Component().behavior(beh).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>')
+    expect(domHtml(root.getComponent())).toBe('<div>123</div>')
   })
 
   test('multiple code spaces', () => {
@@ -118,13 +113,16 @@ describe('env', () => {
         'c-b': 'plugin-private://plugin-2-id/inner-comp-2',
       },
     })
-    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+    codeSpace.addCompiledTemplate(
+      'path/to/comp',
+      tmpl(`
       <c-a />
       <c-aa />
       <i-a />
       <i-b />
       <c-b />
-    `))
+    `),
+    )
     codeSpace.componentEnv('path/to/comp', ({ Component }) => {
       Component().register()
     })
@@ -136,6 +134,8 @@ describe('env', () => {
     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>')
+    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>',
+    )
   })
 })