Skip to content

Commit 687ea0e

Browse files
amirehmatyasf
amireh
authored and
matyasf
committed
fix(esm): validate esm packaging
fixes FOO-1331 at this point, all our current packages should be compatible with Node's ESM support and we can verify it through the tool provided in this patch test plan: follow the README in packaging-test/ and verify you can go through it all Change-Id: Id30e75f5d6db1db9aa854fbedcad3e4e3b3a45da
1 parent 173a310 commit 687ea0e

File tree

6 files changed

+185
-0
lines changed

6 files changed

+185
-0
lines changed

‎packaging-test/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
!/.npmrc
2+
/dist
3+
/node_modules

‎packaging-test/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@instructure:registry = "http://localhost:4873"
2+
package-lock = false

‎packaging-test/.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v14.15.1

‎packaging-test/README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# packaging-test
2+
3+
This tool emulates a consumer of `@instructure/` packages for the purpose of
4+
testing our packaging process -- locally and without publishing to NPM. We do
5+
this through the use of a local NPM registry and Lerna.
6+
7+
## Usage
8+
9+
Run a [Verdaccio] container:
10+
11+
docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio
12+
13+
BACK UP your ~/.npmrc! In fact, I recommend that you use a blank ~/.npmrc for
14+
this in order to avoid accidentally publishing to the official NPM registry.
15+
16+
Visit http://localhost:4873 to verify the registry is running and create a user:
17+
18+
npm adduser --registry http://localhost:4873
19+
20+
This will log you in in ~/.npmrc, this is what mine looked like:
21+
22+
//localhost:4873/:_authToken="redacted=="
23+
24+
You should now be ready to publish through Lerna (from `instructure-ui/` root):
25+
26+
lerna publish --skip-git --registry=http://localhost:4873 patch
27+
28+
Although we told it to `--skip-git`, Lerna will still touch some files, so be
29+
sure not to commit them...
30+
31+
Changes not staged for commit:
32+
(use "git add <file>..." to update what will be committed)
33+
(use "git restore <file>..." to discard changes in working directory)
34+
modified: lerna.json
35+
modified: packages/__docs__/package.json
36+
modified: packages/__examples__/package.json
37+
38+
Once you've published a new version, wipe out `node_modules/` in this folder and
39+
reinstall so that NPM picks up the latest (or do `npm update` like a champion):
40+
41+
rm -rf ./node_modules && npm install
42+
43+
Verify that Webpack can bundle our packages:
44+
45+
npx webpack --entry=$PWD/src/index.mjs
46+
47+
Verify that Node can import our packages:
48+
49+
node src/index.mjs
50+
51+
???
52+
53+
[Verdaccio]: https://verdaccio.org/docs/en/docker

‎packaging-test/package.json‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"name": "instructure-ui-esm-packaging-test",
3+
"private": true,
4+
"dependencies": {
5+
"@instructure/canvas-theme": "^7",
6+
"@instructure/debounce": "^7",
7+
"@instructure/ui-a11y-content": "^7",
8+
"@instructure/ui-alerts": "^7",
9+
"@instructure/ui-avatar": "^7",
10+
"@instructure/ui-badge": "^7",
11+
"@instructure/ui-billboard": "^7",
12+
"@instructure/ui-breadcrumb": "^7",
13+
"@instructure/ui-buttons": "^7",
14+
"@instructure/ui-calendar": "^7",
15+
"@instructure/ui-checkbox": "^7",
16+
"@instructure/ui-color-utils": "^7",
17+
"@instructure/ui-date-input": "^7",
18+
"@instructure/ui-decorator": "^7",
19+
"@instructure/ui-editable": "^7",
20+
"@instructure/ui-file-drop": "^7",
21+
"@instructure/ui-flex": "^7",
22+
"@instructure/ui-focusable": "^7",
23+
"@instructure/ui-form-field": "^7",
24+
"@instructure/ui-grid": "^7",
25+
"@instructure/ui-heading": "^7",
26+
"@instructure/ui-i18n": "^7",
27+
"@instructure/ui-icons": "^7",
28+
"@instructure/ui-img": "^7",
29+
"@instructure/ui-link": "^7",
30+
"@instructure/ui-list": "^7",
31+
"@instructure/ui-menu": "^7",
32+
"@instructure/ui-modal": "^7",
33+
"@instructure/ui-motion": "^7",
34+
"@instructure/ui-number-input": "^7",
35+
"@instructure/ui-overlays": "^7",
36+
"@instructure/ui-pagination": "^7",
37+
"@instructure/ui-portal": "^7",
38+
"@instructure/ui-progress": "^7",
39+
"@instructure/ui-radio-input": "^7",
40+
"@instructure/ui-react-utils": "^7",
41+
"@instructure/ui-responsive": "^7",
42+
"@instructure/ui-select": "^7",
43+
"@instructure/ui-simple-select": "^7",
44+
"@instructure/ui-spinner": "^7",
45+
"@instructure/ui-svg-images": "^7",
46+
"@instructure/ui-table": "^7",
47+
"@instructure/ui-tabs": "^7",
48+
"@instructure/ui-tag": "^7",
49+
"@instructure/ui-text": "^7",
50+
"@instructure/ui-text-area": "^7",
51+
"@instructure/ui-text-input": "^7",
52+
"@instructure/ui-themeable": "^7",
53+
"@instructure/ui-themes": "^7",
54+
"@instructure/ui-toggle-details": "^7",
55+
"@instructure/ui-tooltip": "^7",
56+
"@instructure/ui-tray": "^7",
57+
"@instructure/ui-tree-browser": "^7",
58+
"@instructure/ui-truncate-text": "^7",
59+
"@instructure/ui-utils": "^7",
60+
"@instructure/ui-view": "^7",
61+
"@instructure/uid": "^7"
62+
},
63+
"devDependencies": {
64+
"react": "^16",
65+
"react-dom": "^16",
66+
"webpack": "^5.10.1",
67+
"webpack-cli": "^4.2.0"
68+
}
69+
}

‎packaging-test/src/index.mjs‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import '@instructure/canvas-theme'
2+
import '@instructure/debounce'
3+
import '@instructure/ui-a11y-content'
4+
import '@instructure/ui-alerts'
5+
import '@instructure/ui-avatar'
6+
import '@instructure/ui-badge'
7+
import '@instructure/ui-billboard'
8+
import '@instructure/ui-breadcrumb'
9+
import '@instructure/ui-buttons'
10+
import '@instructure/ui-calendar'
11+
import '@instructure/ui-checkbox'
12+
import '@instructure/ui-color-utils'
13+
import '@instructure/ui-date-input'
14+
import '@instructure/ui-decorator'
15+
import '@instructure/ui-editable'
16+
import '@instructure/ui-file-drop'
17+
import '@instructure/ui-flex'
18+
import '@instructure/ui-focusable'
19+
import '@instructure/ui-form-field'
20+
import '@instructure/ui-grid'
21+
import '@instructure/ui-heading'
22+
import '@instructure/ui-i18n'
23+
import '@instructure/ui-icons'
24+
import '@instructure/ui-img'
25+
import '@instructure/ui-link'
26+
import '@instructure/ui-list'
27+
import '@instructure/ui-menu'
28+
import '@instructure/ui-modal'
29+
import '@instructure/ui-motion'
30+
import '@instructure/ui-number-input'
31+
import '@instructure/ui-overlays'
32+
import '@instructure/ui-pagination'
33+
import '@instructure/ui-portal'
34+
import '@instructure/ui-progress'
35+
import '@instructure/ui-radio-input'
36+
import '@instructure/ui-react-utils'
37+
import '@instructure/ui-responsive'
38+
import '@instructure/ui-select'
39+
import '@instructure/ui-simple-select'
40+
import '@instructure/ui-spinner'
41+
import '@instructure/ui-svg-images'
42+
import '@instructure/ui-table'
43+
import '@instructure/ui-tabs'
44+
import '@instructure/ui-tag'
45+
import '@instructure/ui-text'
46+
import '@instructure/ui-text-area'
47+
import '@instructure/ui-text-input'
48+
import '@instructure/ui-themeable'
49+
import '@instructure/ui-themes'
50+
import '@instructure/ui-toggle-details'
51+
import '@instructure/ui-tooltip'
52+
import '@instructure/ui-tray'
53+
import '@instructure/ui-tree-browser'
54+
import '@instructure/ui-truncate-text'
55+
import '@instructure/ui-utils'
56+
import '@instructure/ui-view'
57+
import '@instructure/uid'

0 commit comments

Comments
 (0)