Finish typing @vue/common

packages/awtrix/templates/core/apps/awtrix/0.0.1/backend.js

@@ -1,15 +1,5 @@
-const { Yeelight } = require('yeelight-node')
-
 module.exports = (BaseClass) => {
   return class extends BaseClass {
-    register () {
-      const light = new Yeelight({ ip: '10.0.0.51', port: 55443 })
-
-      this.io.on('connect', (client) => {
-        client.on('toggle', (ctx) => {
-          light.toggle()
-        })
-      })
-    }
+    register () { }
   }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awtrix/common",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "awtrix",
   "main": "dist/index.js",
   "scripts": {

packages/common/src/defineComponent.ts

@@ -0,0 +1,61 @@
+import {
+  defineComponent,
+  ComponentOptionsWithoutProps,
+  ComponentOptionsWithObjectProps,
+  ComponentOptionsWithArrayProps,
+  ComponentOptionsMixin,
+  ComputedOptions,
+  MethodOptions,
+  ComponentPropsOptions,
+  EmitsOptions
+} from 'vue'
+import FrontendApp from './FrontendApp'
+
+export type GeneratorType = ((base: typeof FrontendApp) => ReturnType<typeof FrontendApp.extend>) & { options: any }
+
+// Define function overloads for the extend function. These are necessary to
+// allow for proper TypeScript typing and auto-completion. This basically
+// copies the overloaded function types from the @vue/runtime-core package.
+// The three possible argument types are:
+
+/**
+ * Creates a new Vue component that inherits from the Awtrix HD FrontendApp.
+ *
+ * @param options
+ * @returns GeneratorType
+ */
+function extend<Props = {}, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = typeof FrontendApp, E extends EmitsOptions = EmitsOptions, EE extends string = string>
+  (options: ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, Mixin, Extends, E, EE>): GeneratorType
+
+/**
+ * Creates a new Vue component that inherits from the Awtrix HD FrontendApp.
+ *
+ * @param options
+ * @returns GeneratorType
+ */
+function extend<PropNames extends string, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = typeof FrontendApp, E extends EmitsOptions = Record<string, any>, EE extends string = string>
+  (options: ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, Mixin, Extends, E, EE>): GeneratorType
+
+/**
+ * Creates a new Vue component that inherits from the Awtrix HD FrontendApp.
+ *
+ * @param options
+ * @returns GeneratorType
+ */
+function extend<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = typeof FrontendApp, E extends EmitsOptions = Record<string, any>, EE extends string = string>
+  (options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>): GeneratorType
+
+// Finally the function implementation.
+function extend(options: any): GeneratorType {
+  const generatorFunction = (base: typeof FrontendApp) => defineComponent({ ...options, extends: base })
+
+  // `vue-loader` creates a `render` function and attaches it to the exported function's
+  // `options` property. If the exported function is a Vue constructor that is fine. We
+  // are dealing with our custom generator function however, so we need to add the
+  // `options` property as well. We will then override the actual render function after
+  // loading the component in our frontend.
+  Object.assign(generatorFunction, { options: {} })
+  return generatorFunction as GeneratorType
+}
+
+export default extend

packages/common/src/index.ts

@@ -1,18 +1,4 @@
-export { GeneratorType, default as createFrontend } from './createFrontend'
+export { GeneratorType, default as defineComponent } from './defineComponent'
 export { default as BackendApp } from './BackendApp'
 export { default as FrontendApp } from './FrontendApp'
-import { foobar } from './createFrontend'
 export * as Types from './types'
-
-foobar({
-  data () {
-    return {
-      nuddel: 'foa'
-    }
-  },
-
-  created () {
-    this.nuddel
-    this.lock()
-  }
-})