Initial thoughts #1

connor4312 · 2017-08-12T01:20:14Z

So in here there are a few arounds:

mixer.d.ts is the interface that the standard library will satisfy
alchemy/State is the mini, read-only interactive-node around the standard library
alchemy/Control contains the decorators/registry that are used to register scenes and custom controls
alchemy/Preact are the Preact primitives for building components in this world
index is the "hello world" implementation of an Interactive button.

I can still hear Matt saying "now anyone can build an interactive integration in just 20 lines of code" from the Techstars pitch last year 😄

Let me know what you think! Overall I'm super happy with how lightweight this is turning out to be. Total min+zipped filesize of this is 6.5KB.

ProbablePrime · 2017-08-12T01:24:44Z

src/alchemy/Control.ts


+    /**
+     * When specified, registers this class to handle a specific scene ID.
+     * For instance, if you wanted the scenes `lobby` and `arena` to have


This is what i was talking about in slack, the wording here is a bit clumsy.

"if you wanted the scenes ... to have two different scenes"

Do you mean "scene ids" on the first one?

yea, something like that... switching between English and code is hard 😛

ProbablePrime · 2017-08-12T01:25:42Z

mixer.d.ts

+    /**
+     * ISceneUpdate is an event triggered when a an existing scene is updated.
+     */
+    export interface ISceneUpdate {


Im tempted to say events should be past tense,

"ISceneUpdated" makes more sense with the doc comment

ProbablePrime · 2017-08-12T01:26:30Z

mixer.d.ts

@@ -1,7 +1,225 @@
 declare module 'mixer' {
+    import { EventEmitter } from 'eventemitter3';


Do we need to write these again? I know we're refactoring but we already have them elsewhere. I guess if we tidy up later its fine :)

EventEmitter stuff? Or .d.ts?

My idea was that we'd keep this .d.ts (maybe autogen it later) and have it as an external in webpack. This removes even the necessity for developers to use a module loader if they don't want to.

For the eventemitter stuff, there's events as polyfilled by webpack but the version they use is super out of date again Node and also pretty hefty. Also I have a crush Arnout Kazemier. ee3 is great.

I meant I<InteractiveWordThing>. Also another note about event emitter later on thanks for the info.

As a side note(not a reccomendation to actually use): https://github.com/developit/mitt :P, same dev as preact. I love preact developer's work its all small and coool.

More importantly ee3 is very well-maintained and tested in a wide matrix of browsers (displayed in their readme) whereas the built-in one is not. I still have an open PR from forever ago to update it browserify/events#32

Oh, that seems neat! I kind of prefer to use one that matches the Node API though 😄

Absoloutely in this case, Mitt is briefer and suffers with lack of matching API. It was just a general "Let's share cool stuff" comment. :P

definitely!

ProbablePrime · 2017-08-12T01:28:46Z

package.json

@@ -10,6 +10,7 @@
  "author": "Connor Peet <[email protected]>",
  "license": "MIT",
  "dependencies": {
+    "eventemitter3": "^2.0.3",


Mostly curiosity, what's 3 got over the regular one?

Commented above!

ProbablePrime · 2017-08-12T01:38:48Z

src/alchemy/State.ts

@@ -0,0 +1,350 @@
+import { controlRegistry, IControlDescriptor, ISceneDescriptor, sceneRegistry } from './Control';


File length is huge here, Let's make it separate files later,

Can always import and then export * to maintain the external import paths.

ProbablePrime

This is awesome, i'll review it again when its a less late hour. Great work

jamesbirtles · 2017-08-12T11:29:09Z

src/alchemy/Preact.tsx

+    protected readonly scene: MScene;
+
+    constructor(props: { scene: MScene }, attributes: T) {
+        super(props, attributes);


Just fyi, you don't actually need to pass props and attributes up to super, Preact doesn't care

jamesbirtles · 2017-08-12T11:29:52Z

src/alchemy/Preact.tsx

+
+    constructor(props: { scene: MScene }, attributes: T) {
+        super(props, attributes);
+        this.scene = props.scene;


It it likely scene would ever change?

nope, never!

jamesbirtles · 2017-08-12T11:30:54Z

src/alchemy/Preact.tsx

+    constructor(props: { scene: MScene }, attributes: T) {
+        super(props, attributes);
+        this.scene = props.scene;
+        this.scene.on('update', ev => {


Are scenes going to ever unmount? If so this should be done in componentDidMount and then also unsubbed in componentWillUnmount

jamesbirtles · 2017-08-12T11:32:37Z

src/alchemy/Preact.tsx

+            this.setState(Object.assign({}, this.state, ev));
+        });
+
+        Object.defineProperty


It was feeling lonely

jamesbirtles · 2017-08-12T11:34:52Z

src/index.tsx

-class HelloWorld extends Component<any, any> {
-    private canvas: Element;
+    public render() {
+        return <button onMouseDown={this.mousedown} onMouseUp={this.mouseup}>{this.text}</button>


Mousdown and mouseup lose context here, need some binds. Decko has a nice decorator for this :)

Initial thoughts

5caf5a9

connor4312 requested review from AechDub, payzer and ProbablePrime August 12, 2017 01:20

ProbablePrime reviewed Aug 12, 2017

View reviewed changes

external mixer stdlib

4b4fb93

ProbablePrime reviewed Aug 12, 2017

View reviewed changes

jamesbirtles reviewed Aug 12, 2017

View reviewed changes

Address PR comments, first Mixer webpack plugin build

8fb1326

connor4312 merged commit 28d0665 into master Aug 14, 2017

connor4312 deleted the init-1 branch August 14, 2017 16:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial thoughts #1

Initial thoughts #1

connor4312 commented Aug 12, 2017 •

edited

Loading

ProbablePrime Aug 12, 2017

connor4312 Aug 12, 2017

ProbablePrime Aug 12, 2017

ProbablePrime Aug 12, 2017

connor4312 Aug 12, 2017 •

edited

Loading

ProbablePrime Aug 12, 2017 •

edited

Loading

connor4312 Aug 12, 2017

connor4312 Aug 12, 2017

ProbablePrime Aug 12, 2017

connor4312 Aug 12, 2017

ProbablePrime Aug 12, 2017

connor4312 Aug 12, 2017

ProbablePrime Aug 12, 2017

ProbablePrime left a comment

jamesbirtles Aug 12, 2017

jamesbirtles Aug 12, 2017

connor4312 Aug 12, 2017

jamesbirtles Aug 12, 2017

jamesbirtles Aug 12, 2017

connor4312 Aug 12, 2017

jamesbirtles Aug 12, 2017

		@@ -1,7 +1,225 @@
		declare module 'mixer' {
		import { EventEmitter } from 'eventemitter3';

		@@ -0,0 +1,350 @@
		import { controlRegistry, IControlDescriptor, ISceneDescriptor, sceneRegistry } from './Control';

Initial thoughts #1

Initial thoughts #1

Conversation

connor4312 commented Aug 12, 2017 • edited Loading

I can still hear Matt saying "now anyone can build an interactive integration in just 20 lines of code" from the Techstars pitch last year 😄

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

connor4312 Aug 12, 2017 • edited Loading

Choose a reason for hiding this comment

ProbablePrime Aug 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ProbablePrime left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

connor4312 commented Aug 12, 2017 •

edited

Loading

connor4312 Aug 12, 2017 •

edited

Loading

ProbablePrime Aug 12, 2017 •

edited

Loading