Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Angular versions support #2467

Merged
merged 21 commits into from
Dec 20, 2017
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
63be049
Create metadata extraction util
igor-dv Dec 11, 2017
00106d3
WIP utils
igor-dv Dec 12, 2017
3778ed9
Use utils on a few more helper functions
igor-dv Dec 12, 2017
e4ccd6d
Update yarn.lock
igor-dv Dec 12, 2017
6e6d36d
Use deprecated OpaqueToken instead of InjectionToken to support angul…
igor-dv Dec 12, 2017
a55741d
Revert changes back to the strong angular 5 version.
igor-dv Dec 13, 2017
fef3b98
Revert back to v5
igor-dv Dec 13, 2017
154e510
Fix `Critical dependency: the request of a dependency is an expressio…
igor-dv Dec 14, 2017
baaa14b
Add node to test (for windows)
igor-dv Dec 14, 2017
fc980e7
Merge remote-tracking branch 'origin/release/3.3' into angular-versio…
igor-dv Dec 14, 2017
eb252c7
Merge branch 'release/3.3' into angular-versions-support
ndelangen Dec 14, 2017
68c119e
Merge branch 'release/3.3' into angular-versions-support
ndelangen Dec 16, 2017
0a8c581
Merge branch 'release/3.3' into angular-versions-support
igor-dv Dec 19, 2017
9cc09db
Merge branch 'release/3.3' into angular-versions-support
igor-dv Dec 20, 2017
dd0d185
Move back to peer deps
igor-dv Dec 20, 2017
08b0bda
Remove setMeta
igor-dv Dec 20, 2017
a1470f6
Add required click handler to prevent errors.
igor-dv Dec 20, 2017
24873e7
Remove pathinfo
igor-dv Dec 20, 2017
6ed2fd8
Fix `Critical dependency: the request of a dependency is an expressio…
igor-dv Dec 20, 2017
1ecd649
Updating fixtures to reflect deprecation of angular 2
alterx Dec 20, 2017
cc32f92
Merge branch 'angular-versions-support' of github.com:storybooks/stor…
alterx Dec 20, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion addons/knobs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@angular/core": "^5.0.0-beta.7",
"babel-runtime": "^6.26.0",
"deep-equal": "^1.0.1",
"global": "^4.3.2",
Expand All @@ -34,6 +33,7 @@
},
"peerDependencies": {
"@storybook/addons": "^3.3.0-alpha.4",
"@angular/core": "*",
"react": "*",
"react-dom": "*"
}
Expand Down
20 changes: 15 additions & 5 deletions addons/knobs/src/angular/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,21 @@

import { Component, SimpleChange, ChangeDetectorRef } from '@angular/core';

import {
getParameters,
getAnnotations,
getPropMetadata,
setAnnotations,
setParameters,
} from './utils';

const getComponentMetadata = ({ component, props = {} }) => {
if (!component || typeof component !== 'function') throw new Error('No valid component provided');

const componentMeta = component.__annotations__[0] || component.annotations[0];
const propsMeta = component.__prop__metadata__ || component.propMetadata || {};
const paramsMetadata = component.__parameters__ || component.parameters || [];
const componentMeta = getAnnotations(component)[0] || {};
const propsMeta = getPropMetadata(component);
const paramsMetadata = getParameters(component);

return {
component,
props,
Expand All @@ -25,8 +34,9 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
this.setPaneKnobs = this.setPaneKnobs.bind(this);
};
NewComponent.prototype = Object.create(component.prototype);
NewComponent.__annotations__ = [new Component(componentMeta)];
NewComponent.__parameters__ = [[ChangeDetectorRef], ...params];

setAnnotations(NewComponent, [new Component(componentMeta)]);
setParameters(NewComponent, [[ChangeDetectorRef], ...params]);

NewComponent.prototype.constructor = NewComponent;
NewComponent.prototype.ngOnInit = function onInit() {
Expand Down
62 changes: 62 additions & 0 deletions addons/knobs/src/angular/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/* eslint-disable no-param-reassign */
/* globals window */

import { VERSION } from '@angular/core';

function getMeta(component, [name1, name2], defaultValue) {
if (!name2) {
name2 = name1;
name1 = `__${name1}__`;
}

if (VERSION.major === '5') {
if (component[name1]) {
return component[name1];
}

if (component[name2]) {
return component[name2];
}
}

if (VERSION.major === '4') {
return window.Reflect.getMetadata(name2, component) || defaultValue;
}

return defaultValue;
}

function setMeta(component, [name1, name2], value) {
if (!name2) {
name2 = name1;
name1 = `__${name1}__`;
}

if (VERSION.major === '5') {
component[name1] = value;
}

if (VERSION.major === '4') {
window.Reflect.defineMetadata(name2, value, component);
}
}

export function getAnnotations(component) {
return getMeta(component, ['annotations'], []);
}

export function getPropMetadata(component) {
return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
}

export function getParameters(component) {
return getMeta(component, ['parameters'], []);
}

export function setAnnotations(component, value) {
setMeta(component, ['annotations'], value);
}

export function setParameters(component, value) {
setMeta(component, ['parameters'], value);
}
15 changes: 9 additions & 6 deletions app/angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,10 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"dev": "DEV_BUILD=1 nodemon -e js,ts --watch ./src --exec 'npm run prepublish'",
"dev": "cross-env DEV_BUILD=1 nodemon -e js,ts --watch ./src --exec \"yarn prepare\"",
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@angular/common": "^5.0.0-beta.7",
"@angular/compiler": "^5.0.0-beta.7",
"@angular/core": "^5.0.0-beta.7",
"@angular/platform-browser": "^5.0.0-beta.7",
"@angular/platform-browser-dynamic": "^5.0.0-beta.7",
"@storybook/addon-actions": "^3.3.0-alpha.4",
"@storybook/addon-links": "^3.3.0-alpha.4",
"@storybook/addons": "^3.3.0-alpha.4",
Expand All @@ -50,6 +45,7 @@
"configstore": "^3.1.0",
"core-js": "^2.4.1",
"css-loader": "^0.28.1",
"cross-env": "^5.1.1",
"express": "^4.15.3",
"file-loader": "^0.11.1",
"find-cache-dir": "^1.0.0",
Expand Down Expand Up @@ -90,5 +86,12 @@
"mock-fs": "^4.3.0",
"nodemon": "^1.12.0",
"typescript": "^2.4.0"
},
"peerDependencies": {
"@angular/common": "*",
"@angular/compiler": "*",
"@angular/core": "*",
"@angular/platform-browser": "*",
"@angular/platform-browser-dynamic": "*"
}
}
55 changes: 34 additions & 21 deletions app/angular/src/client/preview/angular/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,51 @@ import {
ApplicationRef,
CUSTOM_ELEMENTS_SCHEMA
} from "@angular/core";

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./components/app.component";
import { ErrorComponent } from "./components/error.component";
import { NoPreviewComponent } from "./components/no-preview.component";
import { STORY } from "./app.token";

import {
getAnnotations,
getParameters,
getPropMetadata,
setAnnotations,
setParameters,
setPropMetadata,
} from './utils';

let platform = null;
let promises = [];

// Taken from https://davidwalsh.name/javascript-debounce-function
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have lodash.debounce in the project. Why not using it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we have it available than let's use it. I was under the impression that we didn't :)

// We don't want to pull underscore

const debounce = (func, wait = 100, immediate = false) => {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};

const getComponentMetadata = ({ component, props = {}, propsMeta = {} }) => {
if (!component || typeof component !== "function")
throw new Error("No valid component provided");

const componentMetadata =
component.__annotations__[0] || component.annotations[0] || {};
const propsMetadata =
component.__prop__metadata__ || component.propMetadata || {};
const paramsMetadata = component.__parameters__ || component.parameters || [];
const componentMetadata = getAnnotations(component)[0] || {};
const propsMetadata = getPropMetadata(component);
const paramsMetadata = getParameters(component);

Object.keys(propsMeta).map(key => {
propsMetadata[key] = propsMeta[key];
Expand All @@ -60,10 +69,13 @@ const getAnnotatedComponent = (meta, component, propsMeta, params) => {
const NewComponent: any = function NewComponent(...args) {
component.call(this, ...args);
};

NewComponent.prototype = Object.create(component.prototype);
NewComponent.annotations = [new Component(meta)];
NewComponent.parameters = params;
NewComponent.propsMetadata = propsMeta;

setAnnotations(NewComponent,[new Component(meta)]);
setParameters(NewComponent, params);
setPropMetadata(NewComponent, propsMeta);

return NewComponent;
};

Expand All @@ -78,7 +90,8 @@ const getModule = (declarations, entryComponents, bootstrap, data) => {
});

const NewModule: any = function NewModule() {};
NewModule.annotations = [moduleMeta];

setAnnotations(NewModule,[moduleMeta]);

return NewModule;
};
Expand Down
63 changes: 63 additions & 0 deletions app/angular/src/client/preview/angular/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { VERSION } from '@angular/core';

function getMeta(component, [name1, name2]: any, defaultValue) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where can I put this util ? It's duplicated in two projects: addons/knobs and app/angular

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, @ndelangen, where would be the best place to put this util? 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was under the impression that there was an ongoing effort to remove duplicate parts of the code to a core package. Dunno if that's still a thing for 3.3 tho. We might just leave this as is for the time being and wait for that core module to be ready (?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I agree

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was kinda decided to leave the refactor until after the initial release of 3.3, and release it as a patch. @shilman started the refactor branch, @Hypnosphi wanted to hold it off, if I remember correctly.


Where can I put this util ? It's duplicated in two projects: addons/knobs and app/angular

Please give me a bit more context so I can answer your question

if (!name2) {
name2 = name1;
name1 = `__${name1}__`;
}

if (VERSION.major === '5') {
if (component[name1]) {
return component[name1];
}

if (component[name2]) {
return component[name2];
}
}

if (VERSION.major === '4') {
return window['Reflect'].getMetadata(name2, component) || defaultValue;
}

return defaultValue;
}

function setMeta(component, [name1, name2]: any, value) {
if (!name2) {
name2 = name1;
name1 = `__${name1}__`;
}

if (VERSION.major === '5') {
component[name1] = value;
}

if (VERSION.major === '4') {
window['Reflect'].defineMetadata(name2, value, component);
}
}

export function getAnnotations(component) {
return getMeta(component, ['annotations'], []);
}

export function getPropMetadata(component) {
return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
}

export function getParameters(component) {
return getMeta(component, ['parameters'], []);
}

export function setAnnotations(component, value) {
setMeta(component, ['annotations'], value);
}

export function setParameters(component, value) {
setMeta(component, ['parameters'], value);
}

export function setPropMetadata(component, value) {
setMeta(component, ['__prop__metadata__', 'propMetadata'], value);
}
22 changes: 11 additions & 11 deletions examples/angular-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,23 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0-beta.7",
"@angular/common": "^5.0.0-beta.7",
"@angular/compiler": "^5.0.0-beta.7",
"@angular/core": "^5.0.0-beta.7",
"@angular/forms": "^5.0.0-beta.7",
"@angular/http": "^5.0.0-beta.7",
"@angular/platform-browser": "^5.0.0-beta.7",
"@angular/platform-browser-dynamic": "^5.0.0-beta.7",
"@angular/router": "^5.0.0-beta.7",
"@angular/animations": "4.3.5",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason for this?

Copy link
Member Author

@igor-dv igor-dv Dec 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wanted to check if it works with v4 (#269 (comment))

"@angular/common": "4.3.5",
"@angular/compiler": "4.3.5",
"@angular/core": "4.3.5",
"@angular/forms": "4.3.5",
"@angular/http": "4.3.5",
"@angular/platform-browser": "4.3.5",
"@angular/platform-browser-dynamic": "4.3.5",
"@angular/router": "4.3.5",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.3.0",
"@angular/compiler-cli": "^5.0.0-beta.7",
"@angular/language-service": "^5.0.0-beta.7",
"@angular/compiler-cli": "4.3.5",
"@angular/language-service": "4.3.5",
"@storybook/addon-actions": "^3.3.0-alpha.4",
"@storybook/addon-links": "^3.3.0-alpha.4",
"@storybook/addon-notes": "^3.3.0-alpha.4",
Expand Down
Loading