Skip to content

Commit

Permalink
fix: Enable the example projects to use locally linked versions of th…
Browse files Browse the repository at this point in the history
…e Vime packages (vime-js#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
  • Loading branch information
rossng authored Jul 14, 2021
1 parent 4705810 commit fac1f7c
Show file tree
Hide file tree
Showing 35 changed files with 17,350 additions and 18,693 deletions.
27 changes: 27 additions & 0 deletions .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 2 additions & 1 deletion .github/workflows/validate.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
43 changes: 43 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -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/
14 changes: 4 additions & 10 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
3 changes: 2 additions & 1 deletion examples/angular/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
"aot": true,
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css"],
"scripts": []
"scripts": [],
"preserveSymlinks": true
},
"configurations": {
"production": {
Expand Down
26 changes: 13 additions & 13 deletions examples/angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
10 changes: 10 additions & 0 deletions examples/react/craco.config.js
Original file line number Diff line number Diff line change
@@ -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'),
},
},
};
5 changes: 3 additions & 2 deletions examples/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 1 addition & 3 deletions examples/react/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,5 @@
"jsx": "react-jsx",
"jsxFactory": "React.createElement"
},
"include": [
"src"
]
"include": ["src"]
}
2 changes: 1 addition & 1 deletion examples/rollup/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
122 changes: 53 additions & 69 deletions examples/stencil/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
}
}
}
1 change: 1 addition & 0 deletions examples/stencil/src/components/app-home/app-home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
6 changes: 6 additions & 0 deletions examples/stencil/stencil.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
],
},
],
};
3 changes: 2 additions & 1 deletion examples/webpack/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -33,6 +33,7 @@
label="Spanish"
/>
</vm-video>
<vm-default-ui />
</vm-player>
</div>

Expand Down
Loading

0 comments on commit fac1f7c

Please sign in to comment.