Skip to content

Commit 79d9413

Browse files
wcandillonwcandillon
authored
chore(🌎): new web project for testing (#3340)
1 parent 800387e commit 79d9413

14 files changed

Lines changed: 6505 additions & 158 deletions

File tree

‎apps/web-app/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎apps/web-app/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Simple React App with Skia
2+
3+
This is a simple React application that demonstrates using `@shopify/react-native-skia` from the workspace in a web environment.
4+
5+
## Features
6+
7+
- Basic React app setup with TypeScript
8+
- Integration with react-native-skia for web
9+
- Simple canvas example with circles
10+
11+
## Getting Started
12+
13+
From the monorepo root:
14+
15+
```bash
16+
cd apps/web-app
17+
yarn install
18+
yarn start
19+
```
20+
21+
This will start the development server and open the app in your browser.
22+
23+
## Scripts
24+
25+
- `yarn start` - Start the development server
26+
- `yarn build` - Build for production
27+
- `yarn test` - Run tests
28+
- `yarn lint` - Run ESLint
29+
- `yarn tsc` - Run TypeScript compiler check

‎apps/web-app/craco.config.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
2+
const path = require("path");
3+
4+
module.exports = {
5+
webpack: {
6+
plugins: {
7+
add: [new NodePolyfillPlugin()]
8+
},
9+
configure: (webpackConfig) => {
10+
// Remove the ModuleScopePlugin which restricts imports to src/
11+
webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
12+
plugin => plugin.constructor.name !== 'ModuleScopePlugin'
13+
);
14+
15+
// Find and update the babel-loader rule to include workspace packages
16+
const babelRule = webpackConfig.module.rules.find(rule =>
17+
rule.oneOf && Array.isArray(rule.oneOf)
18+
);
19+
20+
if (babelRule) {
21+
const jsRule = babelRule.oneOf.find(rule =>
22+
rule.test && rule.test.toString().includes('jsx')
23+
);
24+
25+
if (jsRule) {
26+
// Extend the JS/JSX rule to include workspace packages
27+
jsRule.include = [
28+
jsRule.include,
29+
path.resolve(__dirname, "../../packages/skia/src")
30+
].filter(Boolean);
31+
}
32+
}
33+
34+
// Add aliases for React Native modules
35+
webpackConfig.resolve.alias = {
36+
...webpackConfig.resolve.alias,
37+
"react-native$": "react-native-web",
38+
"react-native-reanimated": "react-native-reanimated/lib/module/web",
39+
"react-native/Libraries/Image/AssetRegistry": "react-native-web/dist/modules/AssetRegistry",
40+
"@shopify/react-native-skia$": path.resolve(__dirname, "../../packages/skia/src/index.ts"),
41+
"@shopify/react-native-skia/src/web": path.resolve(__dirname, "../../packages/skia/src/web/index.ts")
42+
};
43+
44+
// Ensure canvaskit.wasm is accessible
45+
webpackConfig.resolve.fallback = {
46+
...webpackConfig.resolve.fallback,
47+
fs: false,
48+
path: require.resolve("path-browserify"),
49+
"react-native-reanimated": false,
50+
"react-native-reanimated/package.json": false,
51+
};
52+
53+
return webpackConfig;
54+
}
55+
}
56+
};

‎apps/web-app/package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "web-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"start": "craco start",
7+
"build": "craco build",
8+
"eject": "react-scripts eject",
9+
"lint-disabled": "eslint src --ext .ts,.tsx --max-warnings 0",
10+
"tsc-disabled": "tsc --noEmit"
11+
},
12+
"dependencies": {
13+
"@shopify/react-native-skia": "workspace:*",
14+
"@types/node": "^16.18.0",
15+
"@types/react": "^19.0.0",
16+
"@types/react-dom": "^19.0.0",
17+
"react": "19.0.0",
18+
"react-dom": "19.0.0",
19+
"react-native-reanimated": "3.19.1",
20+
"react-scripts": "5.0.1",
21+
"typescript": "^5.2.2",
22+
"web-vitals": "^2.1.0"
23+
},
24+
"devDependencies": {
25+
"@craco/craco": "^7.1.0",
26+
"@typescript-eslint/eslint-plugin": "^5.0.0",
27+
"@typescript-eslint/parser": "^5.0.0",
28+
"eslint": "^8.0.0",
29+
"eslint-config-react-app": "^7.0.0",
30+
"node-polyfill-webpack-plugin": "^2.0.1",
31+
"path-browserify": "^1.0.1",
32+
"react-native-web": "^0.21.1"
33+
},
34+
"browserslist": {
35+
"production": [
36+
">0.2%",
37+
"not dead",
38+
"not op_mini all"
39+
],
40+
"development": [
41+
"last 1 chrome version",
42+
"last 1 firefox version",
43+
"last 1 safari version"
44+
]
45+
}
46+
}

‎apps/web-app/public/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Simple React app with react-native-skia"
11+
/>
12+
<title>Simple React App with Skia</title>
13+
</head>
14+
<body>
15+
<noscript>You need to enable JavaScript to run this app.</noscript>
16+
<div id="root"></div>
17+
</body>
18+
</html>

‎apps/web-app/src/App.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Canvas, Fill, } from '@shopify/react-native-skia';
2+
function App() {
3+
console.log({ CanvasKit});
4+
5+
const canvases = [];
6+
for (let i = 0; i < 17; i++) {
7+
canvases.push(
8+
<div key={i} style={{ margin: '10px', display: 'inline-block' }}>
9+
<h4>Canvas {i + 1}</h4>
10+
<Canvas style={{ width: 200, height: 200, }} __destroyWebGLContextAfterRender>
11+
<Fill color={`hsl(${(i * 18) % 360}, 70%, 50%)`} />
12+
</Canvas>
13+
</div>
14+
);
15+
}
16+
17+
return (
18+
<div className="App">
19+
<header className="App-header">
20+
<h1>WebGL Canvas Stress Test</h1>
21+
<p>
22+
Testing how many WebGL canvases this browser can support (20 total).
23+
</p>
24+
</header>
25+
<main>
26+
<h2>20 Skia WebGL Canvases</h2>
27+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
28+
{canvases}
29+
</div>
30+
</main>
31+
</div>
32+
);
33+
}
34+
35+
36+
export default App;

‎apps/web-app/src/index.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}
14+
15+
.App {
16+
text-align: center;
17+
padding: 20px;
18+
}
19+
20+
.App-header {
21+
background-color: #282c34;
22+
padding: 20px;
23+
color: white;
24+
}
25+
26+
.skia-canvas {
27+
border: 1px solid #ddd;
28+
margin: 20px auto;
29+
display: block;
30+
}

‎apps/web-app/src/index.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import './index.css';
4+
5+
import { LoadSkiaWeb } from "@shopify/react-native-skia/src/web";
6+
//import { version } from 'canvaskit-wasm/package.json';
7+
8+
9+
const version = "0.40.0";
10+
LoadSkiaWeb({
11+
locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}`
12+
}).then(async () => {
13+
const App = (await import("./App")).default;
14+
const root = ReactDOM.createRoot(
15+
document.getElementById('root') as HTMLElement
16+
);
17+
root.render(
18+
<React.StrictMode>
19+
<App />
20+
</React.StrictMode>
21+
);
22+
});

‎apps/web-app/tsconfig.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2015",
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"es6"
8+
],
9+
"allowJs": true,
10+
"skipLibCheck": true,
11+
"esModuleInterop": true,
12+
"allowSyntheticDefaultImports": true,
13+
"strict": true,
14+
"forceConsistentCasingInFileNames": true,
15+
"noFallthroughCasesInSwitch": true,
16+
"module": "esnext",
17+
"moduleResolution": "node",
18+
"resolveJsonModule": true,
19+
"isolatedModules": true,
20+
"noEmit": true,
21+
"jsx": "react-jsx",
22+
"downlevelIteration": true,
23+
"baseUrl": ".",
24+
"paths": {
25+
"@shopify/react-native-skia": ["../../packages/skia/src/index.ts"],
26+
"@shopify/react-native-skia/src/web": ["../../packages/skia/src/web/index.ts"]
27+
}
28+
},
29+
"include": [
30+
"src",
31+
"../../packages/skia/src"
32+
]
33+
}

‎externals/depot_tools‎

Submodule depot_tools updated from abc5109 to 6cac3e7

0 commit comments

Comments
 (0)