init

mixer · Aug 11, 2017 · 7332c0f · 7332c0f
commit 7332c0f
Show file tree

Hide file tree

Showing 9 changed files with 275 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,64 @@
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+/package-lock.json
+/build/index.js
+/build/index.js.map
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My Awesome Interactive Integration</title>
+</head>
+<body>
+    <div class="text-center" id="app"></div>
+    <script src="/assets/index.js"></script>
+</body>
+</html>
diff --git a/mixer.d.ts b/mixer.d.ts
@@ -0,0 +1,7 @@
+declare module 'mixer' {
+
+    /**
+     * Attaches a handler function that will be triggered when the call comes in.
+     */
+    export function on(call: string, data: any): void;
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "interactive-scratch",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --content-base build/"
+  },
+  "author": "Connor Peet <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "preact": "^8.2.1"
+  },
+  "devDependencies": {
+    "awesome-typescript-loader": "^3.2.2",
+    "typescript": "^2.4.2",
+    "webpack": "^3.5.3",
+    "webpack-dev-server": "^2.7.1"
+  }
+}
diff --git a/src/alchemy/Control.ts b/src/alchemy/Control.ts
@@ -0,0 +1,108 @@
+import { Component } from 'preact';
+
+/**
+ * IControlOptions are passed to the @Control decorator to describe how
+ * the control is rendered.
+ */
+export interface IControlOptions {
+
+}
+
+export interface IInputOptions {
+    /**
+     * Alias of the property as sent to the Interactive game client and sent
+     * on the wire. Defaults to the property's name.
+     */
+    alias?: string;
+}
+
+/**
+ * OnDestroy is an interface that controls who want to be notified before being
+ * destroyed may implement.
+ *
+ * Note: this is primarily for use in non-Preact based controls. Preact controls
+ * can use the built-in `componentWillUnmount` lifecycle hook instead.
+ */
+export interface OnDestroy {
+    mxOnDestroy();
+}
+
+/**
+ * OnChanges is an interface that controls who want to be notified when their
+ * inputs update may implement.
+ *
+ * Note: this is primarily for use in non-Preact based controls. Preact controls
+ * can use the built-in `componentWillReceiveProps` lifecycle hook instead.
+ */
+export interface OnChanges {
+    mxOnChanges(changes: Changes);
+}
+
+/**
+ * Changes is the interface passed into the OnChanges lifecycle hook.
+ */
+export interface Changes {
+    [key: string]: {
+        previousValue: any;
+        nextValue: any;
+    };
+}
+
+/**
+ * @private
+ */
+interface InputDescriptor {
+    /**
+     * Property name on the class
+     */
+    propertyName: string;
+
+    /**
+     * Name of the property on the protocol.
+     */
+    remoteName: string;
+}
+
+/**
+ * @private
+ */
+interface ControlDescriptor {
+    /**
+     * The component class of the control.
+     */
+    readonly component: new (options: any) => any;
+
+    /**
+     * A list of inputs the control takes.
+     */
+    readonly inputs: InputDescriptor[];
+}
+
+/**
+ * registry is the global control registry populated by the @Control decorator
+ * whenever it decorates a class.
+ */
+export const registry: ControlDescriptor[] = {};
+
+export function Control(options: IControlOptions) {
+    return (constructor: Function) => {
+
+    };
+}
+
+export function Input(options?: IInputOptions) {
+    return function (target: Function, property: string) {
+        const control = registry.find(d => d.component === target);
+        if (!control) {
+            throw new Error(
+                `@Input ${target.name}.${property} was registered, but ${target.name} ` +
+                `does not have a @Control decorator!`
+            );
+        }
+
+        control.inputs.push({
+            propertyName: property,
+            remoteName: options.alias || property,
+        });
+    }
+}
diff --git a/src/alchemy/readme.md b/src/alchemy/readme.md
@@ -0,0 +1,3 @@
+# Alchemy
+
+Alchemy is the standard framework on top of which you can build custom controls.
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,19 @@
+import { Component, h, render } from 'preact';
+
+interface HelloWorldProps {
+    name: string
+}
+
+class HelloWorld extends Component<any, any> {
+    private canvas: Element;
+
+    render (props) {
+        return <canvas ref={c => this.canvas = c}></canvas>
+    }
+
+    public componentDidMount() {
+        debugger;
+    }
+}
+
+render(<HelloWorld name="World" />, document.querySelector('#app'));
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "module": "commonjs",
+    "jsx": "react",
+    "jsxFactory": "h",
+    "target": "es5"
+  },
+  "include": [
+    "src/*.ts",
+    "src/*.tsx"
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,27 @@
+const path = require('path');
+const { CheckerPlugin } = require('awesome-typescript-loader');
+
+module.exports = {
+    devtool: 'source-map',
+    entry: ['./src/index'],
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        publicPath: '/assets/',
+        filename: 'index.js'
+    },
+    resolve: {
+        extensions: ['.js', '.ts', '.tsx']
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                loaders: ['awesome-typescript-loader']
+            }
+        ]
+    },
+    plugins: [
+        new CheckerPlugin()
+    ]
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Alchemy

		Alchemy is the standard framework on top of which you can build custom controls.