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.

Sign up for GitHub

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

Jump to bottom

Angular: Make Ivy work by default in the angular-cli example #15280

Merged
merged 1 commit into from Jul 7, 2021
Merged

Angular: Make Ivy work by default in the angular-cli example #15280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 8 additions & 2 deletions app/angular/src/client/preview/angular-beta/RendererFactory.test.ts
View file
Open in desktop
@@ -1,4 +1,4 @@
import { Component, getPlatform } from '@angular/core';
import { Component, getPlatform, ɵresetJitOptions } from '@angular/core';
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Parameters } from '../types-6-0';
Expand Down Expand Up @@ -26,6 +26,10 @@ describe('RendererFactory', () => {

afterEach(() => {
jest.clearAllMocks();

// Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
// Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
ɵresetJitOptions();
});

describe('CanvasRenderer', () => {
Expand Down Expand Up @@ -65,7 +69,9 @@ describe('RendererFactory', () => {
targetDOMNode: rootTargetDOMNode,
});

expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('<foo>🦊</foo>');
expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe(
'<foo>🦊</foo><!--container-->'
);
});

describe('when forced=true', () => {
Expand Down
8 changes: 6 additions & 2 deletions app/angular/src/client/preview/angular-beta/RendererService.test.ts
View file
Open in desktop
@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, ɵresetJitOptions } from '@angular/core';
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Parameters } from '../types-6-0';
Expand All @@ -18,6 +18,10 @@ describe('RendererService', () => {

afterEach(() => {
jest.clearAllMocks();

// Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
// Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
ɵresetJitOptions();
});

it('should initialize', () => {
Expand Down Expand Up @@ -53,7 +57,7 @@ describe('RendererService', () => {
});

expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
'<foo>🦊</foo>'
'<foo>🦊</foo><!--container-->'
);
});

Expand Down
4 changes: 3 additions & 1 deletion examples/angular-cli/package.json
View file
Open in desktop
Expand Up @@ -15,7 +15,8 @@
"test": "jest",
"test:coverage": "jest --coverage",
"test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
"test:watch": "jest --watch"
"test:watch": "jest --watch",
"postinstall": "ngcc --source ../../node_modules"
Copy link
Member

Choose a reason for hiding this comment

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

Do we need to target every package? most of them don't need to be compiled with ngcc and this will decrease the Dx again

Have you had trouble with --target %list-of-packages%?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ngcc doesn't compile all the dependencies but only the one related to angular, no ?
I had test with a target selection but it did not work with test snapshot. but maybe my list was not complete / good 🤷‍♂️

},
"dependencies": {
"@angular/common": "^11.2.14",
Expand All @@ -28,6 +29,7 @@
"core-js": "^3.8.2",
"node-sass": "^4.14.1",
"rxjs": "^6.6.3",
"telejson": "^5.3.2",
"zone.js": "^0.11.3"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/angular-cli/src/stories/__snapshots__/welcome-angular.stories.storyshot
View file
Open in desktop
Expand Up @@ -11,7 +11,7 @@ exports[`Storyshots Welcome/ To Angular To Angular 1`] = `

</div>
<div
style="text-align:center"
style="text-align: center;"
>
<h1>
Welcome to app!
Expand Down
46 changes: 23 additions & 23 deletions examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot
View file
Open in desktop
Expand Up @@ -3,98 +3,98 @@
exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
<storybook-wrapper>
<storybook-welcome-component
_nghost-a-c25=""
_nghost-a-c151=""
>
<main
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
<h1
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
Welcome to storybook
</h1>
<p
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
This is a UI component dev environment for your app.
</p>
<p
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
We've added some basic stories inside the
<span
_ngcontent-a-c25=""
_ngcontent-a-c151=""
class="inline-code"
>
src/stories
</span>
directory.
<br
_ngcontent-a-c25=""
_ngcontent-a-c151=""
/>
A story is a single state of one or more UI components. You can have as many stories as you want.
<br
_ngcontent-a-c25=""
_ngcontent-a-c151=""
/>
(Basically a story is like a visual test case.)
</p>
<p
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
See these sample
<a
_ngcontent-a-c25=""
_ngcontent-a-c151=""
role="button"
tabindex="0"
>
stories
</a>
for a component called
<span
_ngcontent-a-c25=""
_ngcontent-a-c151=""
class="inline-code"
>
Button
</span>
.
</p>
<p
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
Just like that, you can add your own components as stories.
<br
_ngcontent-a-c25=""
_ngcontent-a-c151=""
/>
You can also edit those components and see changes right away.
<br
_ngcontent-a-c25=""
_ngcontent-a-c151=""
/>
(Try editing the
<span
_ngcontent-a-c25=""
_ngcontent-a-c151=""
class="inline-code"
>
Button
</span>
stories located at
<span
_ngcontent-a-c25=""
_ngcontent-a-c151=""
class="inline-code"
>
src/stories/index.js
</span>
.)
</p>
<p
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
Usually we create stories with smaller UI components in the app.
<br
_ngcontent-a-c25=""
_ngcontent-a-c151=""
/>
Have a look at the
<a
_ngcontent-a-c25=""
_ngcontent-a-c151=""
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
section in our documentation.
</p>
<p
_ngcontent-a-c25=""
_ngcontent-a-c151=""
class="note"
>
<b
_ngcontent-a-c25=""
_ngcontent-a-c151=""
>
NOTE:
</b>
<br
_ngcontent-a-c25=""
_ngcontent-a-c151=""
/>
Have a look at the
<span
_ngcontent-a-c25=""
_ngcontent-a-c151=""
class="inline-code"
>
.storybook/webpack.config.js
Expand Down
12 changes: 6 additions & 6 deletions ...ples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot
View file
Open in desktop
Expand Up @@ -3,11 +3,11 @@
exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c4=""
_nghost-a-c43=""
ng-reflect-text="Button 🥁"
>
<button
_ngcontent-a-c4=""
_ngcontent-a-c43=""
>
Button 🥁
</button>
Expand All @@ -18,11 +18,11 @@ exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c2=""
_nghost-a-c43=""
ng-reflect-text="Button 🥁"
>
<button
_ngcontent-a-c2=""
_ngcontent-a-c43=""
>
Button 🥁
</button>
Expand All @@ -41,11 +41,11 @@ exports[`Storyshots Addons/Actions Story with template 1`] = `
exports[`Storyshots Addons/Actions Use action in method 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c3=""
_nghost-a-c43=""
ng-reflect-text="Button 🥁"
>
<button
_ngcontent-a-c3=""
_ngcontent-a-c43=""
>
Button 🥁
</button>
Expand Down
12 changes: 6 additions & 6 deletions ...gular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot
View file
Open in desktop
Expand Up @@ -3,11 +3,11 @@
exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c7=""
_nghost-a-c43=""
ng-reflect-text="This one should have different"
>
<button
_ngcontent-a-c7=""
_ngcontent-a-c43=""
>
This one should have different backgrounds
</button>
Expand All @@ -18,11 +18,11 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
exports[`Storyshots Addons / Backgrounds With Component 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c5=""
_nghost-a-c43=""
ng-reflect-text="Button"
>
<button
_ngcontent-a-c5=""
_ngcontent-a-c43=""
>
Button
</button>
Expand All @@ -33,11 +33,11 @@ exports[`Storyshots Addons / Backgrounds With Component 1`] = `
exports[`Storyshots Addons / Backgrounds With Template 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c6=""
_nghost-a-c43=""
ng-reflect-text="Button"
>
<button
_ngcontent-a-c6=""
_ngcontent-a-c43=""
>
Button
</button>
Expand Down
8 changes: 4 additions & 4 deletions examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot
View file
Open in desktop
Expand Up @@ -3,11 +3,11 @@
exports[`Storyshots Addons/Docs with some emoji 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c9=""
_nghost-a-c43=""
ng-reflect-text="😀 😎 👍 💯"
>
<button
_ngcontent-a-c9=""
_ngcontent-a-c43=""
>
😀 😎 👍 💯
</button>
Expand All @@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = `
exports[`Storyshots Addons/Docs with text 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c8=""
_nghost-a-c43=""
ng-reflect-text="hello button"
>
<button
_ngcontent-a-c8=""
_ngcontent-a-c43=""
>
hello button
</button>
Expand Down
4 changes: 2 additions & 2 deletions examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot
View file
Open in desktop
Expand Up @@ -3,11 +3,11 @@
exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c11=""
_nghost-a-c43=""
ng-reflect-text="Hello 👋"
>
<button
_ngcontent-a-c11=""
_ngcontent-a-c43=""
>
Hello 👋
</button>
Expand Down
4 changes: 2 additions & 2 deletions examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot
View file
Open in desktop
Expand Up @@ -3,11 +3,11 @@
exports[`Storyshots Addons/Docs/Iframe Basic 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c10=""
_nghost-a-c43=""
ng-reflect-text="Add 👾"
>
<button
_ngcontent-a-c10=""
_ngcontent-a-c43=""
>
Add 👾
</button>
Expand Down
2 changes: 1 addition & 1 deletion examples/angular-cli/src/stories/addons/jest/__snapshots__/addon-jest.stories.storyshot
View file
Open in desktop
Expand Up @@ -11,7 +11,7 @@ exports[`Storyshots Addons/Jest app.component with jest tests 1`] = `

</div>
<div
style="text-align:center"
style="text-align: center;"
>
<h1>
Welcome to app!
Expand Down
4 changes: 2 additions & 2 deletions examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot
View file
Open in desktop
Expand Up @@ -3,11 +3,11 @@
exports[`Storyshots Addons/Links button with link to another story 1`] = `
<storybook-wrapper>
<storybook-button-component
_nghost-a-c12=""
_nghost-a-c43=""
ng-reflect-text="Go to Welcome Story"
>
<button
_ngcontent-a-c12=""
_ngcontent-a-c43=""
>
Go to Welcome Story
</button>
Expand Down