glass-easel 0.1.0

package/tests/types/definition.test.ts

@@ -0,0 +1,442 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { expectType } from 'tsd'
+import * as glassEasel from '../../src'
+
+/**
+ * Properties
+ */
+glassEasel.registerElement({
+  properties: {
+    propStr: String,
+    propNum: Number,
+    propBool: Boolean,
+    propObj: Object,
+    propObjFoo: {
+      value: { foo: 'foo' },
+    },
+    propObjBar: {
+      default: () => ({ bar: 'bar' }),
+    },
+    propFunc: Function,
+    propFuncFoo: {
+      type: Function,
+      value: () => 'foo',
+    },
+    propArr: Array,
+    propArrBooks: {
+      value: [] as { name: string }[],
+    },
+
+    propOptional: {
+      type: String,
+      optionalTypes: [Number, Boolean],
+    },
+    propOptionalFoo: {
+      type: String,
+      optionalTypes: [Number, Boolean],
+      value: 'foo',
+    },
+
+    invalid: {
+      type: String,
+      value: 123,
+    },
+
+    propNull: null,
+  },
+  created() {
+    expectType<string>(this.data.propStr)
+    expectType<number>(this.data.propNum)
+    expectType<boolean>(this.data.propBool)
+    expectType<Readonly<Record<string, any>> | null>(this.data.propObj)
+    expectType<{ readonly foo: string }>(this.data.propObjFoo)
+    expectType<string>(this.data.propObjFoo.foo)
+    expectType<{ readonly bar: string }>(this.data.propObjBar)
+    expectType<string>(this.data.propObjBar.bar)
+    expectType<(...args: any[]) => any>(this.data.propFunc)
+    expectType<() => 'foo'>(this.data.propFuncFoo)
+    expectType<readonly any[]>(this.data.propArr)
+    expectType<readonly { readonly name: string }[]>(this.data.propArrBooks)
+    expectType<any>(this.data.propNull)
+
+    expectType<string | number | boolean>(this.data.propOptional)
+    expectType<string | number | boolean>(this.data.propOptionalFoo)
+
+    expectType<never>(this.data.invalid)
+
+    // @ts-expect-error
+    expectType<any>(this.data.nonExists)
+
+    // @ts-expect-error
+    this.data.propStr = '123'
+    // @ts-expect-error
+    this.data.propObjFoo.foo = '123'
+  },
+})
+
+// glassEasel.registerElement({
+//   properties: {
+//     invalid: {
+//       // @ts-expect-error
+//       type: '123',
+//       // @ts-expect-error
+//       optionalTypes: {},
+//       // @ts-expect-error
+//       observer: true,
+//     },
+//   },
+// })
+
+glassEasel.registerElement({
+  created() {
+    // @ts-expect-error
+    expectType<any>(this.data.non_exists)
+  },
+})
+
+/**
+ * Data
+ */
+glassEasel.registerElement({
+  data: {
+    str: '123',
+    num: 123,
+    bool: true,
+    foo: {
+      foo: 'foo',
+    },
+    func: () => 'foo',
+    arr: [1],
+    books: [{ name: 'book' }],
+  },
+  created() {
+    expectType<string>(this.data.str)
+    expectType<number>(this.data.num)
+    expectType<boolean>(this.data.bool)
+    expectType<{ readonly foo: string }>(this.data.foo)
+    expectType<() => 'foo'>(this.data.func)
+    expectType<readonly number[]>(this.data.arr)
+    expectType<readonly { readonly name: string }[]>(this.data.books)
+
+    // @ts-expect-error
+    expectType<any>(this.data.nonExists)
+
+    // @ts-expect-error
+    this.data.str = '123'
+    // @ts-expect-error
+    this.data.foo.foo = '123'
+  },
+})
+
+/**
+ * SetData
+ */
+glassEasel.registerElement({
+  properties: {
+    propStr: String,
+  },
+  data: {
+    str: '123',
+  },
+  created() {
+    this.setData({ propStr: '123' })
+
+    this.setData({ str: '123' })
+
+    // @ts-expect-error
+    this.setData({ propStr: 123 })
+    // @ts-expect-error
+    this.setData({ str: 123 })
+    // @ts-expect-error
+    this.setData({ propStr: null })
+    // @ts-expect-error
+    this.setData({ str: null })
+    // @ts-expect-error
+    this.setData({ 'propStr.length': 123 })
+    // @ts-expect-error
+    this.setData({ 'str.length': 123 })
+    // @ts-expect-error
+    this.setData({ 'propStr[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'str[0]': 123 })
+  },
+})
+
+glassEasel.registerElement({
+  properties: {
+    propNum: Number,
+  },
+  data: {
+    num: 123,
+  },
+  created() {
+    this.setData({ propNum: 123 })
+
+    this.setData({ num: 123 })
+
+    // @ts-expect-error
+    this.setData({ propNum: '123' })
+    // @ts-expect-error
+    this.setData({ num: '123' })
+    // @ts-expect-error
+    this.setData({ propNum: null })
+    // @ts-expect-error
+    this.setData({ num: null })
+    // @ts-expect-error
+    this.setData({ 'propNum.length': 123 })
+    // @ts-expect-error
+    this.setData({ 'num.length': 123 })
+    // @ts-expect-error
+    this.setData({ 'propNum[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'num[0]': 123 })
+  },
+})
+
+glassEasel.registerElement({
+  properties: {
+    propBool: Boolean,
+  },
+  data: {
+    bool: true,
+  },
+  created() {
+    this.setData({ propBool: true })
+
+    this.setData({ bool: true })
+
+    // @ts-expect-error
+    this.setData({ propBool: 0 })
+    // @ts-expect-error
+    this.setData({ bool: 0 })
+    // @ts-expect-error
+    this.setData({ propBool: null })
+    // @ts-expect-error
+    this.setData({ bool: null })
+    // @ts-expect-error
+    this.setData({ 'propBool.length': 123 })
+    // @ts-expect-error
+    this.setData({ 'bool.length': 123 })
+    // @ts-expect-error
+    this.setData({ 'propBool[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'bool[0]': 123 })
+  },
+})
+
+glassEasel.registerElement({
+  properties: {
+    propObj: Object,
+  },
+  data: {
+    obj: {} as Record<string, any> | null,
+  },
+  created() {
+    this.setData({ propObj: {} })
+    this.setData({ propObj: null })
+    this.setData({ 'propObj.foo': 123 })
+
+    this.setData({ obj: {} })
+    this.setData({ obj: null })
+    this.setData({ 'obj.foo': 123 })
+
+    // @ts-expect-error
+    this.setData({ propObj: 0 })
+    // @ts-expect-error
+    this.setData({ obj: 0 })
+    // @ts-expect-error
+    this.setData({ 'propObj[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'obj[0]': 123 })
+  },
+})
+
+glassEasel.registerElement({
+  properties: {
+    propObjFoo: {
+      type: Object,
+      value: { foo: 'foo' },
+    },
+  },
+  data: {
+    foo: { foo: 'foo' },
+  },
+  created() {
+    this.setData({ propObjFoo: { foo: 'foo' } })
+    this.setData({ 'propObjFoo.foo': '123' })
+
+    this.setData({ foo: { foo: 'foo' } })
+    this.setData({ 'foo.foo': '123' })
+
+    // @ts-expect-error
+    this.setData({ propObjFoo: null })
+    // @ts-expect-error
+    this.setData({ foo: null })
+    // @ts-expect-error
+    this.setData({ propObjFoo: 0 })
+    // @ts-expect-error
+    this.setData({ foo: 0 })
+    // @ts-expect-error
+    this.setData({ propObjFoo: { foo: 'foo', bar: 'bar' } })
+    // @ts-expect-error
+    this.setData({ foo: { foo: 'foo', bar: 'bar' } })
+    // @ts-expect-error
+    this.setData({ 'propObjFoo[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'foo[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'propObjFoo.foo': 123 })
+    // @ts-expect-error
+    this.setData({ 'foo.foo': 123 })
+    // @ts-expect-error
+    this.setData({ 'propObjFoo.nonExists': 123 })
+    // @ts-expect-error
+    this.setData({ 'foo.nonExists': 123 })
+  },
+})
+
+glassEasel.registerElement({
+  properties: {
+    propFunc: {
+      type: Function,
+      value: () => 'foo',
+    },
+  },
+  data: {
+    func: () => 'foo',
+  },
+  created() {
+    this.setData({ propFunc: () => 'foo' })
+
+    this.setData({ func: () => 'foo' })
+
+    // @ts-expect-error
+    this.setData({ propFunc: null })
+    // @ts-expect-error
+    this.setData({ func: null })
+    // @ts-expect-error
+    this.setData({ propFunc: 0 })
+    // @ts-expect-error
+    this.setData({ func: 0 })
+    // @ts-expect-error
+    this.setData({ propFunc: (_: any) => 'foo' })
+    // @ts-expect-error
+    this.setData({ func: (_: any) => 'foo' })
+    // @ts-expect-error
+    this.setData({ 'propFunc[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'func[0]': 123 })
+    // @ts-expect-error
+    this.setData({ 'propFunc.foo': 123 })
+    // @ts-expect-error
+    this.setData({ 'func.foo': 123 })
+  },
+})
+
+glassEasel.registerElement({
+  properties: {
+    propArr: Array,
+  },
+  data: {
+    arr: [] as any[],
+  },
+  created() {
+    this.setData({ propArr: [] })
+    this.setData({ propArr: [1, 'foo', true, {}, null, undefined] })
+    this.setData({ 'propArr[0]': 123 })
+    this.setData({ 'propArr[0].foo': 'foo' })
+
+    this.setData({ arr: [] })
+    this.setData({ arr: [1, 'foo', true, {}, null, undefined] })
+    this.setData({ 'arr[0]': 123 })
+    this.setData({ 'arr[0].foo': 'foo' })
+
+    // @ts-expect-error
+    this.setData({ propArr: null })
+    // @ts-expect-error
+    this.setData({ arr: null })
+    // @ts-expect-error
+    this.setData({ propArr: 0 })
+    // @ts-expect-error
+    this.setData({ arr: 0 })
+    // @ts-expect-error
+    this.setData({ 'propArr.foo': 123 })
+    // @ts-expect-error
+    this.setData({ 'arr.foo': 123 })
+  },
+})
+
+glassEasel.registerElement({
+  properties: {
+    propArrObj: {
+      type: Array,
+      value: [{ name: 'book' }],
+    },
+  },
+  data: {
+    arrObj: [{ name: 'book' }],
+  },
+  created() {
+    this.setData({ propArrObj: [] })
+    this.setData({ propArrObj: [{ name: '123' }, { name: '233' }] })
+    this.setData({ 'propArrObj[0]': { name: 'foo' } })
+    this.setData({ 'propArrObj[0].name': 'foo' })
+
+    this.setData({ arrObj: [] })
+    this.setData({ arrObj: [{ name: '123' }, { name: '233' }] })
+    this.setData({ 'arrObj[0]': { name: 'foo' } })
+    this.setData({ 'arrObj[0].name': 'foo' })
+
+    // @ts-expect-error
+    this.setData({ propArrObj: null })
+    // @ts-expect-error
+    this.setData({ arrObj: null })
+    // @ts-expect-error
+    this.setData({ propArrObj: 0 })
+    // @ts-expect-error
+    this.setData({ arrObj: 0 })
+    // @ts-expect-error
+    this.setData({ 'propArrObj.foo': 123 })
+    // @ts-expect-error
+    this.setData({ 'arrObj.foo': 123 })
+    // @ts-expect-error
+    this.setData({ 'propArrObj[0].name': 123 })
+    // @ts-expect-error
+    this.setData({ 'arrObj[0].name': 123 })
+    // @ts-expect-error
+    this.setData({ 'propArrObj[0].nonExists': 'foo' })
+    // @ts-expect-error
+    this.setData({ 'arrObj[0].nonExists': 'foo' })
+  },
+})
+
+/**
+ * Methods
+ */
+glassEasel.registerElement({
+  methods: {
+    sum(a: number, b: number) {
+      return a + b
+    },
+    foo() {
+      //
+    },
+    bar() {
+      expectType<void>(this.bar())
+      expectType<void>(this.foo())
+      expectType<number>(this.sum(1, 2))
+
+      // @ts-expect-error
+      this.bar(1)
+      // @ts-expect-error
+      this.foo(1)
+      // @ts-expect-error
+      this.sum()
+      // @ts-expect-error
+      this.sum('1', '2')
+      // @ts-expect-error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.nonExists()
+    },
+  },
+})

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,270 @@
+/* eslint-disable */
+
+const path = require('path')
+const webpack = require('webpack')
+const { RawSource } = require('webpack-sources')
+
+const jobs = []
+let mainJobOutput = null
+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 genOutputName = (jobExt) => `glass_easel.${jobExt}${dev ? '.dev' : ''}.js`
+
+const mode = dev ? 'development' : 'production'
+
+const rules = [
+  {
+    test: /\.ts$/,
+    loader: 'ts-loader',
+    exclude: /node_modules/,
+  },
+]
+
+const optimization = {
+  minimize: minimize === null ? undefined : minimize,
+}
+
+const devtool = 'source-map'
+
+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"')
+          }
+        })
+        if (mainJobOutput) {
+          compilation.assets['index.js'] = new RawSource(`module.exports = require('./${mainJobOutput}')`)
+          compilation.assets['index.d.ts'] = new RawSource(`export * from "./${mainJobOutput}"`)
+        }
+      })
+    })
+  }
+}
+
+const globalPlugins = [new BundleDeclarationEntrancePlugin()]
+
+const allCompilation = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: genOutputName('all'),
+    libraryTarget: 'commonjs2',
+  },
+  optimization,
+  devtool,
+  module: {
+    rules,
+  },
+  resolve,
+  performance,
+  plugins: [
+    new webpack.DefinePlugin({
+      'BM.DYNAMIC': true,
+      'BM.SHADOW': false,
+      'BM.COMPOSED': false,
+      'BM.DOMLIKE': false,
+    }),
+    ...globalPlugins
+  ],
+}
+
+const shadowCompilation = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: genOutputName('shadow'),
+    libraryTarget: 'commonjs2',
+  },
+  optimization,
+  devtool,
+  module: {
+    rules,
+  },
+  resolve,
+  performance,
+  plugins: [
+    new webpack.DefinePlugin({
+      'BM.DYNAMIC': false,
+      'BM.SHADOW': true,
+      'BM.COMPOSED': false,
+      'BM.DOMLIKE': false,
+    }),
+    ...globalPlugins
+  ],
+}
+
+const shadowGlobalCompilation = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: genOutputName('shadow.global'),
+    libraryTarget: 'var',
+    library: 'glassEasel',
+  },
+  optimization,
+  devtool,
+  module: {
+    rules,
+  },
+  resolve,
+  performance,
+  plugins: [
+    new webpack.DefinePlugin({
+      'BM.DYNAMIC': false,
+      'BM.SHADOW': true,
+      'BM.COMPOSED': false,
+      'BM.DOMLIKE': false,
+    }),
+    ...globalPlugins
+  ],
+}
+
+const composedCompilation = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: genOutputName('composed'),
+    libraryTarget: 'commonjs2',
+  },
+  optimization,
+  devtool,
+  module: {
+    rules,
+  },
+  resolve,
+  performance,
+  plugins: [
+    new webpack.DefinePlugin({
+      'BM.DYNAMIC': false,
+      'BM.SHADOW': false,
+      'BM.COMPOSED': true,
+      'BM.DOMLIKE': false,
+    }),
+    ...globalPlugins
+  ],
+}
+
+const composedGlobalCompilation = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: genOutputName('composed.global'),
+    libraryTarget: 'var',
+    library: 'glassEasel',
+  },
+  optimization,
+  devtool,
+  module: {
+    rules,
+  },
+  resolve,
+  performance,
+  plugins: [
+    new webpack.DefinePlugin({
+      'BM.DYNAMIC': false,
+      'BM.SHADOW': false,
+      'BM.COMPOSED': true,
+      'BM.DOMLIKE': false,
+    }),
+    ...globalPlugins
+  ],
+}
+
+const domlikeCompilation = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: genOutputName('domlike'),
+    libraryTarget: 'commonjs2',
+  },
+  entry: dev ? './src/bootstrap_dom_dev.js' : './src/index.ts',
+  optimization,
+  devtool,
+  module: {
+    rules,
+  },
+  resolve,
+  performance,
+  plugins: [
+    new webpack.DefinePlugin({ 
+      'BM.DYNAMIC': false,
+      'BM.SHADOW': false,
+      'BM.COMPOSED': false,
+      'BM.DOMLIKE': true,
+    }),
+    ...globalPlugins
+  ],
+}
+
+const domlikeGlobalCompilation = {
+  mode,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: genOutputName('domlike.global'),
+    libraryTarget: 'var',
+    library: 'glassEasel',
+  },
+  entry: dev ? './src/bootstrap_dom_dev.js' : './src/index.ts',
+  optimization,
+  devtool,
+  module: {
+    rules,
+  },
+  resolve,
+  performance,
+  plugins: [
+    new webpack.DefinePlugin({
+      'BM.DYNAMIC': false,
+      'BM.SHADOW': false,
+      'BM.COMPOSED': false,
+      'BM.DOMLIKE': true,
+    }),
+    ...globalPlugins
+  ],
+}
+
+const defaultJobs = [allCompilation, domlikeGlobalCompilation]
+
+if (jobs.length) {
+  module.exports = jobs.map((name) => {
+    const map = {
+      'all': allCompilation,
+      'shadow': shadowCompilation,
+      'shadow-global': shadowGlobalCompilation,
+      'composed': composedCompilation,
+      'composed-global': composedGlobalCompilation,
+      'domlike': domlikeCompilation,
+      'domlike-global': domlikeGlobalCompilation,
+    }
+    if (map[name]) return map[name]
+    throw new Error('Unknown job: ' + name)
+  })
+} else {
+  module.exports = defaultJobs
+}
+mainJobOutput = module.exports[0]?.output.filename.slice(0, -3)