github/wasm-pong
1
0
Fork 0
mirror of https://github.com/thilo-behnke/wasm-pong.git synced 2026-07-11 02:29:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

svelte wasm setup

Browse Source
This commit is contained in:
Thilo Behnke
2022-06-19 12:11:17 +02:00
parent 8e3101ba5d
commit 39fef94b59
12 changed files with 12242 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/svelte-client/.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
.DS_Store
node_modules
public/build/bundle.*

1
client/svelte-client/.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1 @@
{"recommendations": ["svelte.svelte-vscode"]}

64
client/svelte-client/README.md Normal file
View File

@@ -0,0 +1,64 @@
# svelte app
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template-webpack.
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
```bash
npx degit sveltejs/template-webpack svelte-app
cd svelte-app
```
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
## Get started
Install the dependencies...
```bash
cd svelte-app
npm install
```
...then start webpack:
```bash
npm run dev
```
Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes.
## Deploying to the web
### With [now](https://zeit.co/now)
Install `now` if you haven't already:
```bash
npm install -g now
```
Then, from within your project folder:
```bash
now
```
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
### With [surge](https://surge.sh/)
Install `surge` if you haven't already:
```bash
npm install -g surge
```
Then, from within your project folder:
```bash
npm run build
surge public
```

11938
client/svelte-client/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
client/svelte-client/package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "svelte-app",
"version": "1.0.0",
"devDependencies": {
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"mini-css-extract-plugin": "^1.3.4",
"svelte": "^3.31.2",
"svelte-loader": "^3.0.0",
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2",
"ts-loader": "^8.0.4",
"@tsconfig/svelte": "^1.0.10",
"@types/node": "^14.11.1",
"svelte-check": "^1.0.46",
"svelte-preprocess": "^4.3.0",
"tslib": "^2.0.1",
"typescript": "^4.0.3"
},
"dependencies": {
"wasm-app": "file:../wasm/pkg"
},
"bin": {
"create-wasm-app": ".bin/create-wasm-app.js"
},
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack serve --content-base public",
"validate": "svelte-check"
}
}

BIN
client/svelte-client/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

17
client/svelte-client/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>

33
client/svelte-client/src/App.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script lang="ts">
import { FieldWrapper } from "wasm-app";
const field = FieldWrapper.new();
console.log({field})
export let name: string;
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>

63
client/svelte-client/src/global.css Normal file
View File

@@ -0,0 +1,63 @@
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0,80,160);
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}

12
client/svelte-client/src/main.ts Normal file
View File

@@ -0,0 +1,12 @@
import './global.css';
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;

5
client/svelte-client/tsconfig.json Normal file
View File

@@ -0,0 +1,5 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*", "src/node_modules/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
}

74
client/svelte-client/webpack.config.js Normal file
View File

@@ -0,0 +1,74 @@
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const sveltePreprocess = require('svelte-preprocess');
const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';
module.exports = {
entry: {
'build/bundle': ['./src/main.ts']
},
resolve: {
alias: {
svelte: path.dirname(require.resolve('svelte/package.json'))
},
extensions: ['.mjs', '.js', '.ts', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main']
},
output: {
path: path.join(__dirname, '/public'),
filename: '[name].js',
chunkFilename: '[name].[id].js'
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
options: {
compilerOptions: {
dev: !prod
},
emitCss: prod,
hotReload: !prod,
preprocess: sveltePreprocess({ sourceMap: !prod })
}
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
// required to prevent errors from Svelte on Webpack 5+
test: /node_modules\/svelte\/.*\.mjs$/,
resolve: {
fullySpecified: false
}
}
]
},
mode,
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
devtool: prod ? false : 'source-map',
devServer: {
hot: true
},
experiments: {
asyncWebAssembly: true
}
};