Skip to content

Commit

Permalink
es5 bundle
Browse files Browse the repository at this point in the history
  • Loading branch information
toyobayashi committed Jan 16, 2021
1 parent 433d5c2 commit 454b097
Show file tree
Hide file tree
Showing 7 changed files with 153 additions and 19 deletions.
12 changes: 6 additions & 6 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- run: npm install
- name: Build WASM
run: |
echo $EMSDK
emcc -v
chmod +x ./build.sh
./build.sh Release
# - name: Build WASM
# run: |
# echo $EMSDK
# emcc -v
# chmod +x ./build.sh
# ./build.sh Release
- run: npm run build
- name: Publish NPM
if: ${{ startsWith(github.event.ref, 'refs/tags') }}
Expand Down
3 changes: 2 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ api-extractor.json
.eslint*
gulpfile.*
/test
tsgo.config*
tsgo.*
/src
/lib/**/*.map
/examples
Expand All @@ -22,3 +22,4 @@ tsgo.config*
/build.sh
/Sound
/emsdk-cache
/build.js
58 changes: 52 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,13 @@ cd wz
```

``` bash
chmod +x ./build.sh
./build.sh
npm install
npm run build
```

Windows

``` bat
.\build.bat
npm install
npm run build
```
Expand Down Expand Up @@ -139,7 +136,7 @@ Browser environment should be with ES2018+ and WebAssembly support.
})()
```

### Webpack
#### Webpack

Add `CopyWebpackPlugin` to copy `wz.wasm` file

Expand All @@ -148,7 +145,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
plugins: [
// ...
new CopyWebpackPlugin({
patterns: [
{ from: 'node_modules/@tybys/wz/dist/wz.wasm', to: '${the same place with output bundle}/wz.wasm' }
Expand All @@ -157,7 +153,7 @@ module.exports = {
],
/* resolve: {
alias: {
'@tybys/wz': '@tybys/wz/lib/esm/index.js' // this is es5 output
'@tybys/binreader': '@tybys/binreader/lib/esm-modern/index.js'
}
} */
}
Expand All @@ -167,6 +163,56 @@ module.exports = {
import { walkWzFileAsync, /* ... */ } from '@tybys/wz'
```

### Old browser

For example IE11:

``` html
<!-- BigInt -->
<script>
if (typeof BigInt === 'undefined') {
window.BigInt = function BigInt (n) {
return n;
};
}
</script>

<!-- document.currentScript -->
<script>
// https://github.com/amiller-gh/currentScript-polyfill/blob/master/currentScript.js
</script>

<!-- TextDecoder -->
<script src="https://cdn.jsdelivr.net/npm/text-encoding/lib/encoding-indexes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/text-encoding/lib/encoding.js"></script>

<!-- ES6 globals -->
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"></script>

<script src="node_modules/@tybys/wz/dist/wz.es5.min.js"></script>
```

#### Webpack

``` js
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'node_modules/@tybys/wz/dist/wz.js.mem', to: '${the same place with output bundle}/wz.js.mem' }
]
})
],
resolve: {
alias: {
'@tybys/wz': '@tybys/wz/lib/esm/index.js' // es5 output
}
}
}
```

### Advanced

Though `walkWzFileAsync()` is easy to use, it is much more slower in browser than in Node.js. It is recommanded to use class API to do specific directory or image operation.
Expand Down
66 changes: 66 additions & 0 deletions build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
#!/usr/bin/env node

const fs = require('fs')
const path = require('path')
const { spawn } = require('@tybys/cgen/bin/util/spawn.js')
const ts = require('@tybys/tsgo/lib/ts.js')
const { bundler } = require('@tybys/tsgo/lib/util.js')
const { readConfigNoCache } = require('@tybys/tsgo/lib/config.js')

const wasmoutdir = p('./wasm/.cgenbuild')

function p (...args) {
if (!args.length) return __dirname
return path.isAbsolute(args[0]) ? path.join(...args) : path.join(__dirname, ...args)
}

function e (cmd) {
return process.platform === 'win32' ? `${cmd}.cmd` : cmd
}

function mkdir (dir) {
return fs.mkdirSync(dir, { recursive: true })
}

function cp (s, t) {
mkdir(path.dirname(t))
fs.copyFileSync(s, t)
}

async function invokeTSGO (command, config) {
const r = await require(`@tybys/tsgo/command/${command}.js`).run(config)
if (r !== 0) {
throw new Error(`TSGO command failed: ${command}`)
}
}

async function main () {
const tsgoConfig = readConfigNoCache(p('./tsgo.config.js'))
await invokeTSGO('lint', tsgoConfig)

await spawn(e('npx'), ['cgen', 'rebuild', '-e'], path.join(__dirname, 'wasm'))
fs.copyFileSync(p(wasmoutdir, 'wz.js'), p('./src/util/wz.js'))
mkdir(p('./lib/cjs-modern/util'))
mkdir(p('./lib/esm-modern/util'))
mkdir(p('./lib/esm/util'))
cp(p(wasmoutdir, 'wz.wasm'), p('./lib/cjs-modern/util/wz.wasm'))
cp(p(wasmoutdir, 'wz.wasm'), p('./lib/esm-modern/util/wz.wasm'))
ts.compile(p('tsconfig.json'))
ts.compile(p('tsconfig.modern.json'))

const asm = p('./src/util/wz.js')
cp(p(wasmoutdir, 'wzasm.js'), asm)
fs.writeFileSync(asm, fs.readFileSync(asm, 'utf8').replace('wzasm.js.mem', 'wz.js.mem').replace('wzasm.wasm', 'wz.wasm'), 'utf8')
ts.compile(p('tsconfig.esm.json'))
cp(p(wasmoutdir, 'wzasm.js.mem'), p('./lib/esm/util/wz.js.mem'))

await bundler.webpack(tsgoConfig)
await bundler.webpack(readConfigNoCache(p('./tsgo.es5.config.js')))
await invokeTSGO('dts', tsgoConfig)
await invokeTSGO('doc', tsgoConfig)
}

main().catch(err => {
console.error(err)
process.exit(1)
})
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"dts": "tsgo dts",
"doc": "tsgo doc",
"watch": "tsgo watch",
"build": "tsgo build",
"build": "node build.js",
"lint": "tsgo lint",
"fix": "tsgo fix"
},
Expand All @@ -38,7 +38,7 @@
},
"devDependencies": {
"@tybys/cgen": "^0.3.5",
"@tybys/tsgo": "^0.8.0",
"@tybys/tsgo": "^0.8.2",
"@types/crypto-js": "^4.0.1",
"@types/node": "^12.12.36",
"@typescript-eslint/eslint-plugin": "^4.9.0",
Expand Down
8 changes: 4 additions & 4 deletions test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@
<body>
<input type="file" name="" id="file">

<!-- <script src="https://cdn.jsdelivr.net/gh/inexorabletash/text-encoding/lib/encoding-indexes.js"></script>
<script src="https://cdn.jsdelivr.net/gh/inexorabletash/text-encoding/lib/encoding.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"></script> -->
<script src="../dist/wz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/text-encoding/lib/encoding-indexes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/text-encoding/lib/encoding.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"></script>
<script src="../dist/wz.es5.min.js"></script>

<script src="browser.js"></script>
</body>
Expand Down
21 changes: 21 additions & 0 deletions tsgo.es5.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')

module.exports = {
entry: 'lib/esm/index.js',
output: {
webpack: 'dist',
name: 'wz.es5'
},
bundler: ['webpack'],
configureWebpack (config) {
config.plugins = [
...config.plugins,
new CopyWebpackPlugin({
patterns: [
{ from: path.join(path.dirname(config.entry[Object.keys(config.entry)[0]][0]), 'util/wz.js.mem'), to: path.join(config.output.path, 'wz.js.mem') }
]
})
]
}
}

0 comments on commit 454b097

Please sign in to comment.