glass-easel-miniprogram-adapter 0.1.0

package/tests/trait_behavior.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('trait behavior', () => {
+  test('implement trait behavior', () => {
+    const env = new MiniProgramEnv()
+    const codeSpace = env.createCodeSpace('', true)
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {})
+    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+      <div>{{r}}</div>
+    `))
+    codeSpace.componentEnv('path/to/comp', ({ Component, Behavior }) => {
+      const trait = Behavior.trait<
+        { add(a: number, b: number): number },
+        { minus(a: number, b: number): number }
+          >(({ add }) => ({
+            minus(a, b) {
+              return add(a, -b)
+            },
+          }))
+      Component()
+        .data(() => ({
+          r: 0,
+        }))
+        .init(({
+          self,
+          setData,
+          lifetime,
+          implement,
+        }) => {
+          implement(trait, { add: (a, b) => a + b })
+          lifetime('attached', () => {
+            const r = self.traitBehavior(trait)!.minus(5, 3)
+            setData({ r })
+          })
+          expect(self.hasBehavior(trait)).toBe(true)
+        })
+        .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>2</div>')
+  })
+
+  test('trait behavior in relations', () => {
+    const env = new MiniProgramEnv()
+    const codeSpace = env.createCodeSpace('', true)
+
+    const childTrait = codeSpace.traitBehavior<{
+      setA(a: number): void,
+    }>()
+    const parentTrait = codeSpace.traitBehavior()
+
+    codeSpace.addComponentStaticConfig('child/list', {
+      component: true,
+    })
+    codeSpace.addCompiledTemplate('child/list', tmpl(`
+      <div>{{count}}</div><slot />
+    `))
+    // eslint-disable-next-line arrow-body-style
+    codeSpace.componentEnv('child/list', ({ Component }) => {
+      return Component()
+        .data(() => ({
+          count: 0,
+        }))
+        .implement(parentTrait, {})
+        .init(({ relation, setData }) => {
+          const childRel = relation({
+            type: 'child',
+            target: childTrait,
+            linked(child) {
+              // eslint-disable-next-line no-use-before-define
+              expect(child.asInstanceOf(itemDef)).not.toBe(null)
+              setData({ count: this.data.count + 1 })
+              childRel.listAsTrait().forEach((c, index) => {
+                c.setA(index + 2)
+              })
+            },
+          })
+        })
+        .register()
+    })
+
+    codeSpace.addComponentStaticConfig('child/item', {
+      component: true,
+    })
+    codeSpace.addCompiledTemplate('child/item', tmpl('{{a}}'))
+    // eslint-disable-next-line arrow-body-style
+    const itemDef = codeSpace.componentEnv('child/item', ({ Component }) => {
+      return Component()
+        .data(() => ({
+          a: 0,
+        }))
+        .init(({ implement, relation, setData }) => {
+          implement(childTrait, {
+            setA(a: number) {
+              setData({ a })
+            },
+          })
+          relation({
+            type: 'parent',
+            target: parentTrait,
+          })
+        })
+        .register()
+    })
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {
+      usingComponents: {
+        list: '/child/list',
+        item: '/child/item',
+      },
+    })
+    codeSpace.addCompiledTemplate('path/to/comp', tmpl(`
+      <list>
+        <item />
+        <item />
+      </list>
+    `))
+    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
+      Component().register()
+    })
+
+    const ab = env.associateBackend()
+    const root = ab.createRoot('body', codeSpace, 'path/to/comp')
+    glassEasel.Element.pretendAttached(root.getComponent())
+    expect(domHtml(root.getComponent()))
+      .toBe('<list><div>2</div><item>2</item><item>3</item></list>')
+  })
+})

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "declarationDir": "dist/types"
+    },
+    "include": [
+        "src/**/*.ts",
+        "tests/**/*.ts",
+        "examples/**/*.ts"
+    ]
+}

package/webpack.config.js

@@ -0,0 +1,78 @@
+const path = require('path')
+const webpack = require('webpack')
+const { RawSource } = require('webpack-sources')
+
+const jobs = []
+let minimize = null
+let dev = false
+const args = process.env['GLASS_EASEL_ARGS'] || ''
+args.split(' ').forEach((arg) => {
+  if (!arg) return
+  if (arg[0] === '-') {
+    if (arg === '--minimize') minimize = true
+    else if (arg === '--no-minimize') minimize = false
+    else if (arg === '--dev') dev = true
+  } else {
+    jobs.push(arg)
+  }
+})
+
+const mode = dev ? 'development' : 'production'
+
+const rules = [
+  {
+    test: /\.ts$/,
+    loader: 'ts-loader',
+    exclude: /node_modules/,
+  },
+]
+
+const optimization = {
+  minimize: minimize === null ? undefined : minimize,
+}
+
+const resolve = {
+  extensions: [ '.ts', '.js' ],
+}
+
+const performance = {
+  maxEntrypointSize: 512000,
+  maxAssetSize: 512000,
+}
+
+class BundleDeclarationEntrancePlugin {
+  apply(compiler) {
+    compiler.hooks.compilation.tap('BundleDeclarationEntrancePlugin', (compilation, compilationParams) => {
+      compilation.hooks.additionalAssets.tapPromise('ExtraAssetPlugin', async () => {
+        Object.keys(compilation.assets).forEach((file) => {
+          if (file.endsWith('.js')) {
+            const dtsFile = file.replace(/\.js$/, '.d.ts')
+            compilation.assets[dtsFile] = new RawSource('export * from "./types/src/index"')
+          }
+        })
+      })
+    })
+  }
+}
+
+const globalPlugins = [new BundleDeclarationEntrancePlugin()]
+
+module.exports = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'glass_easel_miniprogram_adapter.js',
+    libraryTarget: 'commonjs2',
+  },
+  optimization,
+  devtool: 'source-map',
+  module: {
+    rules,
+  },
+  resolve,
+  externals: 'glass-easel',
+  performance,
+  plugins: [
+    ...globalPlugins
+  ],
+}