Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Merge requests
  • !8303

Add WASM support

  • Review changes

  • Download
  • Email patches
  • Plain diff
Open Administrator requested to merge github/fork/sheerun/wasm into main 5 years ago
  • Overview 7
  • Commits 1
  • Pipelines 1
  • Changes 8

Created by: sheerun

This PR adds proper WASM support with tests

Compare
  • version 1
    4bf20604
    2 years ago

  • main (base)

and
  • latest version
    4bf20604
    1 commit, 2 years ago

  • version 1
    4bf20604
    1 commit, 2 years ago

8 files
+ 92
- 3

    Preferences

    File browser
    Compare changes
packages/re‎act-scripts‎
con‎fig‎
webpack.‎config.js‎ +15 -3
packag‎e.json‎ +1 -0
test/fixtures‎/wasm-support‎
__snap‎shots__‎
index.tes‎t.js.snap‎ +5 -0
s‎rc‎
App‎.js‎ +18 -0
inde‎x.js‎ +5 -0
hello_wor‎ld_bg.wasm‎ +0 -0
index.‎test.js‎ +41 -0
packag‎e.json‎ +7 -0
packages/react-scripts/config/webpack.config.js
+ 15
- 3
  • View file @ 4bf20604

  • Edit in single-file editor

  • Open in Web IDE


Conflict: This file was modified in both the source and target branches. Ask someone with write access to resolve it.
@@ -270,8 +270,8 @@ module.exports = function(webpackEnv) {
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }]
}
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
],
// Automatically split vendor and commons
@@ -557,6 +557,13 @@ module.exports = function(webpackEnv) {
'sass-loader'
),
},
// Adds support for dynamic loading of .wasm files like so:
// const { fn } = import('./module.wasm')
{
test: /\.wasm$/,
include: paths.appSrc,
use: [{ loader: require.resolve('wasm-loader'), options: {} }],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
@@ -568,7 +575,12 @@ module.exports = function(webpackEnv) {
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
exclude: [
/\.(js|mjs|jsx|ts|tsx)$/,
/\.html$/,
/\.json$/,
/\.wasm$/,
],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
packages/react-scripts/package.json
+ 1
- 0
  • View file @ 4bf20604

  • Edit in single-file editor

  • Open in Web IDE


Conflict: This file was modified in both the source and target branches. Ask someone with write access to resolve it.
@@ -76,6 +76,7 @@
"terser-webpack-plugin": "2.3.0",
"ts-pnp": "1.1.5",
"url-loader": "2.3.0",
"wasm-loader": "^1.3.0",
"webpack": "4.41.2",
"webpack-dev-server": "3.9.0",
"webpack-manifest-plugin": "2.2.0",
test/fixtures/wasm-support/__snapshots__/index.test.js.snap 0 → 100644
+ 5
- 0
  • View file @ 4bf20604

  • Edit in single-file editor

  • Open in Web IDE

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`can use wasm library in development 1`] = `"Ultimate answer: 42"`;
exports[`can use wasm library in production 1`] = `"Ultimate answer: 42"`;
test/fixtures/wasm-support/src/App.js 0 → 100644
+ 18
- 0
  • View file @ 4bf20604

  • Edit in single-file editor

  • Open in Web IDE

import React, { Component } from 'react';
class App extends Component {
state = {};
componentDidMount() {
import('./hello_world_bg.wasm').then(helloWorld => {
this.setState({ answer: helloWorld.add(21, 21) });
});
}
render() {
const { answer } = this.state;
return answer ? (
<div className="wasm-result">Ultimate answer: {answer}</div>
) : null;
}
}
export default App;
test/fixtures/wasm-support/src/index.js 0 → 100644
+ 5
- 0
  • View file @ 4bf20604

  • Edit in single-file editor

  • Open in Web IDE

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
test/fixtures/wasm-support/hello_world_bg.wasm 0 → 100644
+ 0
- 0
  • View file @ 4bf20604

hello_world_bg.wasm

Download
test/fixtures/wasm-support/index.test.js 0 → 100644
+ 41
- 0
  • View file @ 4bf20604

  • Edit in single-file editor

  • Open in Web IDE

const testSetup = require('../__shared__/test-setup');
const puppeteer = require('puppeteer');
test('can use wasm library in development', async () => {
const { port, done } = await testSetup.scripts.start();
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('.wasm-result', { timeout: 0 });
const output = await page.evaluate(() => {
return Array.from(document.getElementsByClassName('wasm-result')).pop()
.innerHTML;
});
expect(output).toMatchSnapshot();
} finally {
browser.close();
done();
}
});
test('can use wasm library in production', async () => {
await testSetup.scripts.build();
const { port, done } = await testSetup.scripts.serve();
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('.wasm-result', { timeout: 0 });
const output = await page.evaluate(() => {
return Array.from(document.getElementsByClassName('wasm-result')).pop()
.innerHTML;
});
expect(output).toMatchSnapshot();
} finally {
browser.close();
done();
}
});
test/fixtures/wasm-support/package.json 0 → 100644
+ 7
- 0
  • View file @ 4bf20604

  • Edit in single-file editor

  • Open in Web IDE

{
"dependencies": {
"react": "latest",
"react-dom": "latest",
"serve": "10.0.2"
}
}
0 Assignees
None
Assign to
0 Reviewers
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
Lock merge request
Unlocked
1
1 participant
Administrator
Reference:
Source branch: github/fork/sheerun/wasm

Menu

Explore Projects Groups Snippets