build: update build process to conform to Angular Package Format #51

CaerusKaru · 2017-11-06T04:58:24Z

This is the improved version of #50. Preboot will now use the same bundling method that Angular Material and Flex-Layout use.

update build process to use rollup and Angular compiler (ngc) to produce ES5 and ES2015 bundles
remove the inline script builder in favor of run-time compilation
combine ServerPrebootModule and BrowserPrebootModule into a singular PrebootModule, also combine PrebootReplayOptions and PrebootRecordOptions into PrebootOptions
Remove relative import in favor of root import, import {...} from 'preboot/server'; --> import {...} from 'preboot';
Deprecate the minification feature due to removal of inline script builder
Make nonce import cleaner
Update preboot deps to Angular v5

BREAKING CHANGE:

Any imports of ServerPrebootModule or BrowserPrebootModule need to be removed in favor of PrebootModule, and all relative imports need to be changed to import directly from preboot
The minification option has been removed. Official guidance is for end-users to perform minification manually on the rendered HTML

Fixes #49
Fixes #52

This PR is meant to stop packaging full TypeScript files in the library. This breaks testing capabilities in Angular, and is overall unnecessary. Instead, we transpile all files using tsc into a separate directory, and only publish that directory, with the root files (index.js and index.d.ts) specified in package.json. There are no breaking changes in this PR, but if you are building from source, please make sure to update your dev dependencies. * add outDir to tsconfig for bundling * upgrade to angular v5 and use new compiler instead of just tsc * clean up package.jsom npm scripts * add exports to index.ts to allow for root import * move inline builder to separate directory * add dev dependencies for TypeScript building * add files and directories to npmignore to allow for root packaging * move protractor config to root level * change webpack to use ts-loader * Fixes angular#49 BREAKING CHANGE: Due to the change in how folders are exported, all imports from `preboot` must come as a root import, e.g. `import {ServerPrebootModule} from 'preboot';` instead of `import {ServerPrebootModule} from 'preboot/server';`

jeffwhelpley

@CaerusKaru when I pull this locally and try it out, I am getting a number of errors. Specifically, I did the following:

npm i
npm run build

and I got the following:

ES2015 compilation succeeded.
ES5 compilation succeeded.
Typings and metadata copy succeeded.
options.entry is deprecated, use options.input
options.entry is deprecated, use options.input
options.entry is deprecated, use options.input
options.entry is deprecated, use options.input
Build failed. See below for errors.

Error: Unexpected key 'dest' found, expected one of: acorn, amd, banner, cache, context, entry, exports, extend, external, file, footer, format, globals, indent, input, interop, intro, legacy, moduleContext, name, noConflict, onwarn, output, outro, paths, plugins, preferConst, pureExternalModules, sourcemap, sourcemapFile, strict, targets, treeshake, watch
    at validateKeys (/Users/jeffwhelpley/opensource/temp/preboot/node_modules/rollup/dist/rollup.js:171:11)
    at checkInputOptions (/Users/jeffwhelpley/opensource/temp/preboot/node_modules/rollup/dist/rollup.js:16349:14)
    at Object.rollup (/Users/jeffwhelpley/opensource/temp/preboot/node_modules/rollup/dist/rollup.js:16420:3)
    at allBundles.map.cfg (/Users/jeffwhelpley/opensource/temp/preboot/build.js:128:25)
    at Array.map (<anonymous>)
    at Promise.resolve.then.then.then.then.then (/Users/jeffwhelpley/opensource/temp/preboot/build.js:128:7)
    at <anonymous>

Then I just tried to tsc and got:

integration/src/app/app.module.ts(6,48): error TS2307: Cannot find module 'preboot'.
integration/src/prerender.ts(4,43): error TS2307: Cannot find module 'fs-extra'.
out-tsc/lib/api/event.recorder.spec.ts(5,3): error TS2305: Module '"/Users/jeffwhelpley/opensource/temp/preboot/out-tsc/lib/index"' has no exported member 'Element'.
out-tsc/lib/api/event.recorder.spec.ts(25,27): error TS2345: Argument of type 'HTMLElement | undefined' is not assignable to parameter of type 'Expected<HTMLElement>'.
  Type 'undefined' is not assignable to type 'Expected<HTMLElement>'.
out-tsc/lib/api/event.recorder.spec.ts(36,9): error TS2322: Type '() => { style: { display: string; }; }' is not assignable to type '(deep?: boolean | undefined) => Node'.
  Type '{ style: { display: string; }; }' is not assignable to type 'Node'.
    Property 'attributes' is missing in type '{ style: { display: string; }; }'.
out-tsc/lib/api/event.recorder.spec.ts(42,27): error TS2345: Argument of type '{ style: { display: string; }; }' is not assignable to parameter of type 'Expected<HTMLElement>'.
  Type '{ style: { display: string; }; }' is not assignable to type 'ObjectContaining<HTMLElement>'.
    Property 'jasmineMatches' is missing in type '{ style: { display: string; }; }'.
out-tsc/lib/api/event.recorder.spec.ts(100,13): error TS2322: Type '{ root: { serverSelector: string; serverNode: {}; }; events: never[]; }' is not assignable to type 'PrebootAppData'.
  Types of property 'root' are incompatible.
    Type '{ serverSelector: string; serverNode: {}; }' is not assignable to type 'ServerClientRoot'.
      Types of property 'serverNode' are incompatible.
        Type '{}' is not assignable to type 'HTMLElement | undefined'.
          Type '{}' is not assignable to type 'HTMLElement'.
            Property 'accessKey' is missing in type '{}'.
out-tsc/lib/api/event.recorder.spec.ts(114,87): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'EventListenerOrEventListenerObject' has no compatible call signatures.
out-tsc/lib/api/inline.preboot.code.spec.ts(8,9): error TS2305: Module '"/Users/jeffwhelpley/opensource/temp/preboot/out-tsc/lib/common/preboot.interfaces"' has no exported member 'PrebootRecordOptions'.
out-tsc/lib/common/get-node-key.spec.ts(25,27): error TS2352: Type '{ root: { serverSelector: string; serverNode: { childNodes: ({} | { childNodes: ({} | { childNode...' cannot be converted to type 'NodeContext'.
  Types of property 'root' are incompatible.
    Type '{ serverSelector: string; serverNode: { childNodes: ({} | { childNodes: ({} | { childNodes: {}[];...' is not comparable to type 'ServerClientRoot'.
      Types of property 'serverNode' are incompatible.
        Type '{ childNodes: ({} | { childNodes: ({} | { childNodes: {}[]; })[]; })[]; }' is not comparable to type 'HTMLElement | undefined'.
          Type '{ childNodes: ({} | { childNodes: ({} | { childNodes: {}[]; })[]; })[]; }' is not comparable to type 'HTMLElement'.
            Property 'accessKey' is missing in type '{ childNodes: ({} | { childNodes: ({} | { childNodes: {}[]; })[]; })[]; }'.
src/lib/api/event.recorder.spec.ts(5,3): error TS2305: Module '"/Users/jeffwhelpley/opensource/temp/preboot/src/lib/index"' has no exported member 'Element'.
src/lib/api/event.recorder.spec.ts(25,27): error TS2345: Argument of type 'HTMLElement | undefined' is not assignable to parameter of type 'Expected<HTMLElement>'.
  Type 'undefined' is not assignable to type 'Expected<HTMLElement>'.
src/lib/api/event.recorder.spec.ts(36,9): error TS2322: Type '() => { style: { display: string; }; }' is not assignable to type '(deep?: boolean | undefined) => Node'.
  Type '{ style: { display: string; }; }' is not assignable to type 'Node'.
    Property 'attributes' is missing in type '{ style: { display: string; }; }'.
src/lib/api/event.recorder.spec.ts(42,27): error TS2345: Argument of type '{ style: { display: string; }; }' is not assignable to parameter of type 'Expected<HTMLElement>'.
  Type '{ style: { display: string; }; }' is not assignable to type 'ObjectContaining<HTMLElement>'.
    Property 'jasmineMatches' is missing in type '{ style: { display: string; }; }'.
src/lib/api/event.recorder.spec.ts(100,13): error TS2322: Type '{ root: { serverSelector: string; serverNode: {}; }; events: never[]; }' is not assignable to type 'PrebootAppData'.
  Types of property 'root' are incompatible.
    Type '{ serverSelector: string; serverNode: {}; }' is not assignable to type 'ServerClientRoot'.
      Types of property 'serverNode' are incompatible.
        Type '{}' is not assignable to type 'HTMLElement | undefined'.
          Type '{}' is not assignable to type 'HTMLElement'.
            Property 'accessKey' is missing in type '{}'.
src/lib/api/event.recorder.spec.ts(114,87): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'EventListenerOrEventListenerObject' has no compatible call signatures.
src/lib/api/inline.preboot.code.spec.ts(8,9): error TS2305: Module '"/Users/jeffwhelpley/opensource/temp/preboot/src/lib/common/preboot.interfaces"' has no exported member 'PrebootRecordOptions'.
src/lib/common/get-node-key.spec.ts(25,27): error TS2352: Type '{ root: { serverSelector: string; serverNode: { childNodes: ({} | { childNodes: ({} | { childNode...' cannot be converted to type 'NodeContext'.
  Types of property 'root' are incompatible.
    Type '{ serverSelector: string; serverNode: { childNodes: ({} | { childNodes: ({} | { childNodes: {}[];...' is not comparable to type 'ServerClientRoot'.
      Types of property 'serverNode' are incompatible.
        Type '{ childNodes: ({} | { childNodes: ({} | { childNodes: {}[]; })[]; })[]; }' is not comparable to type 'HTMLElement | undefined'.
          Type '{ childNodes: ({} | { childNodes: ({} | { childNodes: {}[]; })[]; })[]; }' is not comparable to type 'HTMLElement'.
            Property 'accessKey' is missing in type '{ childNodes: ({} | { childNodes: ({} | { childNodes: {}[]; })[]; })[]; }'.
utils/preboot.mocks.ts(1,34): error TS2305: Module '"/Users/jeffwhelpley/opensource/temp/preboot/src/lib/index"' has no exported member 'Element'.
utils/preboot.mocks.ts(1,43): error TS2305: Module '"/Users/jeffwhelpley/opensource/temp/preboot/src/lib/index"' has no exported member 'PrebootRecordOptions'.
utils/preboot.mocks.ts(1,65): error TS2305: Module '"/Users/jeffwhelpley/opensource/temp/preboot/src/lib/index"' has no exported member 'Window'.

So, are you still working on this? If so, just let me know when you want me to try it out.

jeffwhelpley · 2017-11-09T06:14:10Z

integration/package.json

@@ -0,0 +1,70 @@
+{


Instead of package-lock.json, we should probably include a shrinkwrap file.

Added, and removed package-lock.json

jeffwhelpley · 2017-11-10T17:42:33Z

Btw, if you want to jump on a hangout to work on this together at any point, just let me know.

CaerusKaru · 2017-11-10T19:11:38Z

You're having issues with building because I suspect your version of rollup is too high. They don't follow semver, so the latest version (0.51.x) is incompatible with build config for the version that's used here and by the other Angular libraries (0.41.x). I'll update the package.json to reflect this. As for the tsc issues, my build runs fine, what version of TypeScript are you using? Since Angular 5 compiler still only supports TypeScript 2.4.2, that's the version I'm using here (I'll change this in the package.json too).

I'd be happy to hop on a Hangout (my Google username is caerus.karu), the only issue I'm still facing is the e2e testing bug. Everything builds successfully, but the EventReplayer won't kick in on its own during bootstrap (although it works fine in real applications).

CaerusKaru · 2017-11-10T21:12:47Z

@jeffwhelpley Just for the record, here's my build process at the moment (I'll cut it down for the official release):

In src, run npm i and npm run prerelease
In integration, run npm run build and npm run e2e:aot

You should see at the point that the e2e passes the first two tests, but fails on the next two

CaerusKaru · 2017-11-12T09:18:27Z

@jeffwhelpley This is ready to be merged, I resolved the final e2e issue (which turned out to be a good thing because the timing on the EventReplayer was very off).

The official commands to run the build are close to the old version:

npm run prerelease && npm run e2e

This will build the library and run the e2e tests. At some point we'll probably want to incorporate some unit tests as well, but that's been left as a stub for now.

Let me know what you think, and if any other changes are needed.

CaerusKaru · 2017-11-12T10:10:05Z

@jeffwhelpley Just touching up the spec type issues you noted above (I finally read through and realized my build wasn't catching those type errors for some reason). I'll ping you when this is resolved, which should be in the next few minutes (sorry for the ping spam).

CaerusKaru · 2017-11-12T11:21:32Z

@jeffwhelpley type issues resolved, everything should be set

jeffwhelpley · 2017-11-12T13:56:27Z

@CaerusKaru ok, this is definitely going in the right direction but I still have a few more questions. Rather than go back an forth on here, let's just do a Google Hangout Monday or Tuesday night this week to wrap things up. Send me your email to jeff at gethuman dot com.

mgol · 2017-12-05T14:00:22Z

Is there anything else blocking this PR?

jeffwhelpley · 2017-12-05T14:27:04Z

@mgol apologies, we are still working out one issue. We will get this resolved today.

* Still maintains compatibility with non-Angular library for direct import * AOT compatible, compiled with Angular v5 * Removes separate ServerPreboot and BrowserPreboot and respective options in favor of combining them into one module * Allows for top-level imports on everything * Add build for ES5 and ES2015 bundles * Add karma testing capability * Credit to angular-quickstart-lib for a lot of the scaffolding * Credit to flex-layout and material packages for remaining work

jeffwhelpley · 2017-12-05T18:10:26Z

OK, @mgol @CaerusKaru I merged in this PR and published it under 6.0.0-beta.0. Please try it out and let me know if you run into any issues.

misticwonder · 2017-12-06T17:18:27Z

There is an issue with styles. After switching to front part. They have no styles applied. I.e.

<app-root style="display: none;"><app-home-info _ngcontent-c1=""><app-root>
<app-root><app-home-info _ngcontent-c2=""><app-root>

But styles only for _ngcontent-c1

CaerusKaru · 2017-12-06T17:23:53Z

@misticwonder Can you link to a minimal reproduction repo so we can check this out?

misticwonder · 2017-12-06T19:42:04Z

I've found a problem. In my project appRef.isStable is never true.

misticwonder · 2017-12-07T20:03:29Z

There is another issue:
When injector.get(ApplicationInitStatus).donePromise resolves - angular removes all styles with 'ng-transition' from the header. But appRef.isStable becomes true later in my app. This leads to the messing on the page for time between this 2 events.

CaerusKaru · 2017-12-07T20:30:17Z

@misticwonder Please open a separate issue with a minimal reproduction instead of appending to this PR

CaerusKaru mentioned this pull request Nov 6, 2017

[WIP] build: update build process to only bundle .js and .d.ts files #50

Closed

CaerusKaru force-pushed the lib branch 4 times, most recently from 70b6639 to b968e82 Compare November 6, 2017 05:10

CaerusKaru mentioned this pull request Nov 9, 2017

ng serve & ng e2e fails when using preboot with angular CLI #52

Closed

8 tasks

jeffwhelpley reviewed Nov 10, 2017

View reviewed changes

CaerusKaru force-pushed the lib branch 2 times, most recently from 1d0ebc9 to 49fd4ca Compare November 10, 2017 19:19

CaerusKaru force-pushed the lib branch from 49fd4ca to 7ca3daa Compare November 12, 2017 09:16

CaerusKaru changed the title ~~[WIP] build: update build process to conform to Angular Library format~~ build: update build process to conform to Angular Library format Nov 12, 2017

CaerusKaru force-pushed the lib branch 6 times, most recently from b2f67c1 to 38c0eb3 Compare November 12, 2017 09:52

CaerusKaru force-pushed the lib branch from 38c0eb3 to e5adc3f Compare November 12, 2017 11:21

CaerusKaru force-pushed the lib branch from e5adc3f to 87b915c Compare November 14, 2017 01:35

CaerusKaru force-pushed the lib branch 3 times, most recently from 043da31 to 5f29b09 Compare November 30, 2017 20:49

CaerusKaru force-pushed the lib branch 3 times, most recently from 9c441d1 to c0ddc16 Compare November 30, 2017 21:36

CaerusKaru changed the title ~~build: update build process to conform to Angular Library format~~ build: update build process to conform to Angular Package Format Dec 1, 2017

CaerusKaru force-pushed the lib branch from c0ddc16 to ef71a5a Compare December 5, 2017 18:05

jeffwhelpley merged commit fe313da into angular:master Dec 5, 2017

CaerusKaru deleted the lib branch December 5, 2017 18:10

CaerusKaru added this to the 6.0.0 milestone Feb 13, 2018

build: update build process to conform to Angular Package Format #51

build: update build process to conform to Angular Package Format #51

Uh oh!

Conversation

CaerusKaru commented Nov 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jeffwhelpley left a comment

Choose a reason for hiding this comment

Uh oh!

jeffwhelpley Nov 9, 2017

Choose a reason for hiding this comment

Uh oh!

CaerusKaru Nov 10, 2017

Choose a reason for hiding this comment

Uh oh!

jeffwhelpley commented Nov 10, 2017

Uh oh!

CaerusKaru commented Nov 10, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CaerusKaru commented Nov 10, 2017

Uh oh!

CaerusKaru commented Nov 12, 2017

Uh oh!

CaerusKaru commented Nov 12, 2017

Uh oh!

CaerusKaru commented Nov 12, 2017

Uh oh!

jeffwhelpley commented Nov 12, 2017

Uh oh!

mgol commented Dec 5, 2017

Uh oh!

jeffwhelpley commented Dec 5, 2017

Uh oh!

jeffwhelpley commented Dec 5, 2017

Uh oh!

misticwonder commented Dec 6, 2017

Uh oh!

CaerusKaru commented Dec 6, 2017

Uh oh!

misticwonder commented Dec 6, 2017

Uh oh!

misticwonder commented Dec 7, 2017

Uh oh!

CaerusKaru commented Dec 7, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

CaerusKaru commented Nov 6, 2017 •

edited

Loading

CaerusKaru commented Nov 10, 2017 •

edited

Loading