fix: Enable the example projects to use locally linked versions of th…

…e Vime packages (#227) * fix: preserve dir structure when bundling core icons The local icons are used at development time, but were incorrectly copied without preserving the directory structure by cpy-cli. This commit moves that responsibility to a Stencil copy task. * fix: ensure React example works with locally-linked package Previously this would result in duplicate copies of React. * fix: fix error in Rollup CSS build * fix: make Stencil demo work when linked locally * fix: Webpack example should always load extracted CSS * fix: ensure Angular example works with linked packages * build: add the examples as Lerna packages This means that they can be used with locally linked versions of the @vime packages if desired. By default, the build command will only run on the public packages. * build: fix Angular packages to v11-lts to ensure peer deps compatibility * build: remove typescript devdependency from @vime/core Stencil brings its own TypeScript with it, perhaps the version clash is breaking something? * build: @vime/core - add @types/node, add DOM/ES2017 libs to tsconfig * build: update @vime/core package-lock * build: make prettier use its own ignore file * chore: apply prettier formatting * build: update validate workflow * build: fix validate.yml format
vime-js · Jul 14, 2021 · fac1f7c · fac1f7c
1 parent 4705810
commit fac1f7c
Show file tree

Hide file tree

Showing 35 changed files with 17,350 additions and 18,693 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -72,6 +72,33 @@ $: git branch --set-upstream-to=upstream/master master
 $: git pull
 ```
 
+### Build
+
+Vime is structured as a [Lerna](https://github.com/lerna/lerna) monorepo.
+
+First, we need to install packages and then bootstrap the repo with Lerna. This sets up and creates links between the internal packages. For example, the local `@vime/react` package will point directly at the local `@vime/core` package rather than using an already-published version.
+
+```bash
+$: npm install
+$: npm run bootstrap
+```
+
+To build all the packages:
+
+```bash
+$: npm run build
+```
+
+### Testing with examples
+
+If you are modifying Vime and want to test out your updated code using one of the examples, you can also use Lerna to link the local packages into them:
+
+```bash
+$: npm run bootstrap:all
+```
+
+Note: this does not apply to the `html` example, which loads the published version directly from a CDN.
+
 ## 🏗️ Architecture
 
 For how Vime works in general see the [Architecture](./ARCHITECTURE.md) document.

diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -11,9 +11,10 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2-beta
+        uses: actions/setup-node@v2
         with:
           node-version: 16
+      - run: npm ci
 
       - name: Cache Dependencies
         id: deps

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,43 @@
+**/package-lock.json
+**/components.d.ts
+
+dist/
+build/
+www/
+loader/
+
+packages/core/icons/
+packages/core/themes/
+
+docs/docs/components
+
+packages/angular/projects/vime/src/VimeModule.ts
+packages/angular/projects/vime/src/components/
+packages/react/src/components
+packages/svelte/src/components/
+packages/svelte/src/svelte/
+packages/vue/src/components/
+packages/vue-next/src/components/
+
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+/tmp
+/out-tsc
+/bazel-out
+/.pnp
+.pnp.js
+.eslintcache/
+.nyc_output/
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.docusaurus/
+.cache-loader/
+.versions/
+node_modules/
+web_modules/
+coverage/
+jest-coverage/
+$RECYCLE.BIN/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,20 +5,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [5.0.33](https://github.com/vime-js/vime/compare/v5.0.32...v5.0.33) (2021-07-12)
 
-
 ### Bug Fixes
 
-* **core:** add missing `README.md` ([36274d9](https://github.com/vime-js/vime/commit/36274d9a5ad43abf9058bd423e315a30b7163210))
-
-
-
-
+- **core:** add missing `README.md` ([36274d9](https://github.com/vime-js/vime/commit/36274d9a5ad43abf9058bd423e315a30b7163210))
 
 ## [5.0.32](https://github.com/vime-js/vime/compare/v5.0.31...v5.0.32) (2021-07-12)
 
-
 ### Bug Fixes
 
-* include node 12.x engine ([#213](https://github.com/vime-js/vime/issues/213)) ([456478b](https://github.com/vime-js/vime/commit/456478b853f0f64b9b16c7c72e5134a94b8688d0))
-* include node engine 15.x and 16.x ([eb0ccaa](https://github.com/vime-js/vime/commit/eb0ccaa96fafd6f291a6b2deeec61658b65e83e9))
-* various build issues (@vime/core, react example, react integration, svelte example) ([#222](https://github.com/vime-js/vime/issues/222)) ([0a80967](https://github.com/vime-js/vime/commit/0a80967617d9feee54ae6ae51bf87bdf4b110591))
+- include node 12.x engine ([#213](https://github.com/vime-js/vime/issues/213)) ([456478b](https://github.com/vime-js/vime/commit/456478b853f0f64b9b16c7c72e5134a94b8688d0))
+- include node engine 15.x and 16.x ([eb0ccaa](https://github.com/vime-js/vime/commit/eb0ccaa96fafd6f291a6b2deeec61658b65e83e9))
+- various build issues (@vime/core, react example, react integration, svelte example) ([#222](https://github.com/vime-js/vime/issues/222)) ([0a80967](https://github.com/vime-js/vime/commit/0a80967617d9feee54ae6ae51bf87bdf4b110591))
diff --git a/examples/angular/angular.json b/examples/angular/angular.json
@@ -21,7 +21,8 @@
             "aot": true,
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],
-            "scripts": []
+            "scripts": [],
+            "preserveSymlinks": true
           },
           "configurations": {
             "production": {

diff --git a/examples/angular/package.json b/examples/angular/package.json
@@ -8,30 +8,30 @@
     "serve": "ng serve"
   },
   "dependencies": {
-    "@angular/animations": "~10.2.1",
-    "@angular/common": "~10.2.1",
-    "@angular/compiler": "~10.2.1",
-    "@angular/core": "~10.2.1",
-    "@angular/forms": "~10.2.1",
-    "@angular/platform-browser": "~10.2.1",
-    "@angular/platform-browser-dynamic": "~10.2.1",
-    "@angular/router": "~10.2.1",
+    "@angular/animations": "v11-lts",
+    "@angular/common": "v11-lts",
+    "@angular/compiler": "v11-lts",
+    "@angular/core": "v11-lts",
+    "@angular/forms": "v11-lts",
+    "@angular/platform-browser": "v11-lts",
+    "@angular/platform-browser-dynamic": "v11-lts",
+    "@angular/router": "v11-lts",
     "@vime/angular": "^5.0.0",
     "@vime/core": "^5.0.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.1",
-    "zone.js": "~0.11.3"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.0",
-    "@angular/cli": "~10.2.0",
-    "@angular/compiler-cli": "~10.2.1",
+    "@angular-devkit/build-angular": "v11-lts",
+    "@angular/cli": "v11-lts",
+    "@angular/compiler-cli": "v11-lts",
     "@types/jest": "^26.0.12",
     "@types/node": "^14.14.6",
     "codelyzer": "^6.0.0",
     "jest-diff": "^26.6.2",
     "pretty-format": "^26.6.2",
     "ts-node": "~9.0.0",
-    "typescript": "^3.9.2"
+    "typescript": "~4.0.0"
   }
 }
diff --git a/examples/react/craco.config.js b/examples/react/craco.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      react: path.resolve(__dirname, './node_modules/react'),
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+    },
+  },
+};
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -11,13 +11,14 @@
     "typescript": "^4.1.3"
   },
   "devDependencies": {
+    "@craco/craco": "^6.2.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0"
   },
   "scripts": {
-    "build": "react-scripts build",
+    "build": "craco build",
     "eject": "react-scripts eject",
-    "serve": "react-scripts start"
+    "serve": "craco start"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json
@@ -12,7 +12,5 @@
     "jsx": "react-jsx",
     "jsxFactory": "React.createElement"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
diff --git a/examples/rollup/package.json b/examples/rollup/package.json
@@ -14,7 +14,7 @@
     "@rollup/plugin-node-resolve": "^10.0.0",
     "clean-css": "^4.2.3",
     "rollup": "^2.32.1",
-    "rollup-plugin-css-only": "^2.1.0",
+    "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "sirv-cli": "^1.0.6"

diff --git a/examples/stencil/src/components.d.ts b/examples/stencil/src/components.d.ts
@@ -4,81 +4,65 @@
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
-import { PlayerProps } from '@vime/core';
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { PlayerProps } from "@vime/core";
 export namespace Components {
-  interface AppHome {}
-  interface AppRoot {}
-  interface TapSidesToSeek {
-    currentTime: PlayerProps['currentTime'];
-    duration: PlayerProps['duration'];
-  }
-  interface VmIcons {
-    /**
-     * The URL to an SVG sprite to load.
-     */
-    href: string;
-  }
+    interface AppHome {
+    }
+    interface AppRoot {
+    }
+    interface TapSidesToSeek {
+        "currentTime": PlayerProps['currentTime'];
+        "duration": PlayerProps['duration'];
+    }
 }
 declare global {
-  interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement {}
-  var HTMLAppHomeElement: {
-    prototype: HTMLAppHomeElement;
-    new (): HTMLAppHomeElement;
-  };
-  interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {}
-  var HTMLAppRootElement: {
-    prototype: HTMLAppRootElement;
-    new (): HTMLAppRootElement;
-  };
-  interface HTMLTapSidesToSeekElement
-    extends Components.TapSidesToSeek,
-      HTMLStencilElement {}
-  var HTMLTapSidesToSeekElement: {
-    prototype: HTMLTapSidesToSeekElement;
-    new (): HTMLTapSidesToSeekElement;
-  };
-  interface HTMLVmIconsElement extends Components.VmIcons, HTMLStencilElement {}
-  var HTMLVmIconsElement: {
-    prototype: HTMLVmIconsElement;
-    new (): HTMLVmIconsElement;
-  };
-  interface HTMLElementTagNameMap {
-    'app-home': HTMLAppHomeElement;
-    'app-root': HTMLAppRootElement;
-    'tap-sides-to-seek': HTMLTapSidesToSeekElement;
-    'vm-icons': HTMLVmIconsElement;
-  }
+    interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement {
+    }
+    var HTMLAppHomeElement: {
+        prototype: HTMLAppHomeElement;
+        new (): HTMLAppHomeElement;
+    };
+    interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
+    }
+    var HTMLAppRootElement: {
+        prototype: HTMLAppRootElement;
+        new (): HTMLAppRootElement;
+    };
+    interface HTMLTapSidesToSeekElement extends Components.TapSidesToSeek, HTMLStencilElement {
+    }
+    var HTMLTapSidesToSeekElement: {
+        prototype: HTMLTapSidesToSeekElement;
+        new (): HTMLTapSidesToSeekElement;
+    };
+    interface HTMLElementTagNameMap {
+        "app-home": HTMLAppHomeElement;
+        "app-root": HTMLAppRootElement;
+        "tap-sides-to-seek": HTMLTapSidesToSeekElement;
+    }
 }
 declare namespace LocalJSX {
-  interface AppHome {}
-  interface AppRoot {}
-  interface TapSidesToSeek {
-    currentTime?: PlayerProps['currentTime'];
-    duration?: PlayerProps['duration'];
-  }
-  interface VmIcons {
-    /**
-     * The URL to an SVG sprite to load.
-     */
-    href?: string;
-  }
-  interface IntrinsicElements {
-    'app-home': AppHome;
-    'app-root': AppRoot;
-    'tap-sides-to-seek': TapSidesToSeek;
-    'vm-icons': VmIcons;
-  }
+    interface AppHome {
+    }
+    interface AppRoot {
+    }
+    interface TapSidesToSeek {
+        "currentTime"?: PlayerProps['currentTime'];
+        "duration"?: PlayerProps['duration'];
+    }
+    interface IntrinsicElements {
+        "app-home": AppHome;
+        "app-root": AppRoot;
+        "tap-sides-to-seek": TapSidesToSeek;
+    }
 }
 export { LocalJSX as JSX };
-declare module '@stencil/core' {
-  export namespace JSX {
-    interface IntrinsicElements {
-      'app-home': LocalJSX.AppHome & JSXBase.HTMLAttributes<HTMLAppHomeElement>;
-      'app-root': LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
-      'tap-sides-to-seek': LocalJSX.TapSidesToSeek &
-        JSXBase.HTMLAttributes<HTMLTapSidesToSeekElement>;
-      'vm-icons': LocalJSX.VmIcons & JSXBase.HTMLAttributes<HTMLVmIconsElement>;
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "app-home": LocalJSX.AppHome & JSXBase.HTMLAttributes<HTMLAppHomeElement>;
+            "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
+            "tap-sides-to-seek": LocalJSX.TapSidesToSeek & JSXBase.HTMLAttributes<HTMLTapSidesToSeekElement>;
+        }
     }
-  }
 }
diff --git a/examples/stencil/src/components/app-home/app-home.tsx b/examples/stencil/src/components/app-home/app-home.tsx
@@ -7,6 +7,7 @@ import { Component, h } from '@stencil/core';
 })
 export class AppHome {
   // Obtain a ref if you need to call any methods.
+  // @ts-expect-error
   private player!: HTMLVmPlayerElement;
 
   private onPlaybackReady() {

diff --git a/examples/stencil/stencil.config.ts b/examples/stencil/stencil.config.ts
@@ -11,6 +11,12 @@ export const config: Config = {
       type: 'www',
       serviceWorker: null,
       baseUrl: 'https://myapp.local/',
+      copy: [
+        {
+          src: '../node_modules/@vime/core/icons',
+          dest: 'icons',
+        },
+      ],
     },
   ],
 };
diff --git a/examples/webpack/public/index.html b/examples/webpack/public/index.html
@@ -13,7 +13,7 @@
 
   <body>
     <div id="container">
-      <vm-player controls>
+      <vm-player>
         <vm-video cross-origin poster="https://media.vimejs.com/poster.png">
           <source
             data-src="https://media.vimejs.com/720p.mp4"
@@ -33,6 +33,7 @@
             label="Spanish"
           />
         </vm-video>
+        <vm-default-ui />
       </vm-player>
     </div>