beenull
/
rustpad
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update dependencies and switch build to Vite (#30)

This commit is contained in:
Eric Zhang 2021-11-12 02:38:14 -05:00 committed by GitHub
parent 204b084e62
commit 4ac57685c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 1859 additions and 36644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dockerignore
View File

@ -2,7 +2,7 @@
/target
pkg
/node_modules
/build
/dist
*.local
Dockerfile

2
.gitignore vendored
View File

@ -3,7 +3,7 @@ pkg
node_modules
.DS_Store
build
dist
*.local
.vscode

2
.prettierignore
View File

@ -3,5 +3,5 @@ pkg
node_modules
.DS_Store
build
dist
*.local

6
Dockerfile
View File

@ -10,7 +10,7 @@ WORKDIR /home/rust/src
RUN apk --no-cache add curl musl-dev
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
COPY . .
RUN wasm-pack build rustpad-wasm
RUN wasm-pack build --target web rustpad-wasm
FROM node:lts-alpine as frontend
WORKDIR /usr/src/app
@ -19,11 +19,11 @@ COPY --from=wasm /home/rust/src/rustpad-wasm/pkg rustpad-wasm/pkg
RUN npm ci
COPY . .
ARG GITHUB_SHA
ENV REACT_APP_SHA=${GITHUB_SHA}
ENV VITE_SHA=${GITHUB_SHA}
RUN npm run build
FROM scratch
COPY --from=frontend /usr/src/app/build build
COPY --from=frontend /usr/src/app/dist dist
COPY --from=backend /home/rust/src/target/release/rustpad-server .
USER 1000:1000
CMD [ "./rustpad-server" ]

4
README.md
View File

@ -37,7 +37,7 @@ To run this application, you need to install Rust, `wasm-pack`, and Node.js.
Then, build the WebAssembly portion of the app:
```
wasm-pack build rustpad-wasm
wasm-pack build --target web rustpad-wasm
```
When that is complete, you can install dependencies for the frontend React
@ -57,7 +57,7 @@ While the backend is running, open another shell and run the following command
to start the frontend portion.
```
npm start
npm run dev
```
This command will open a browser window to `http://localhost:3000`, with hot

25
config-overrides.js
View File

@ -1,25 +0,0 @@
const path = require("path");
module.exports = function override(config, env) {
const wasmExtensionRegExp = /\.wasm$/;
config.resolve.extensions.push(".wasm");
config.module.rules.forEach((rule) => {
(rule.oneOf || []).forEach((oneOf) => {
if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
// make file-loader ignore WASM files
oneOf.exclude.push(wasmExtensionRegExp);
}
});
});
// add a dedicated loader for WASM
config.module.rules.push({
test: wasmExtensionRegExp,
include: path.resolve(__dirname, "src"),
use: [{ loader: require.resolve("wasm-loader"), options: {} }],
});
return config;
};

4
public/index.html → index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rustpad: Collaborative Code Editor</title>
<meta
@ -18,7 +18,7 @@
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

38360
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

38
package.json
View File

@ -3,14 +3,13 @@
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"format": "prettier --write ."
},
"dependencies": {
"@chakra-ui/react": "^1.6.10",
"@chakra-ui/react": "^1.7.0",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@monaco-editor/react": "^4.3.1",
@ -19,36 +18,17 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"rustpad-wasm": "file:./rustpad-wasm/pkg",
"use-local-storage-state": "^11.0.0"
},
"devDependencies": {
"@types/lodash.debounce": "^4.0.6",
"@types/react": "^17.0.30",
"@types/react-dom": "^17.0.10",
"monaco-editor": "^0.29.1",
"@types/react": "^17.0.34",
"@types/react-dom": "^17.0.11",
"@vitejs/plugin-react": "^1.0.8",
"monaco-editor": "^0.30.1",
"prettier": "2.4.1",
"raw.macro": "^0.4.2",
"react-app-rewired": "^2.1.8",
"typescript": "~4.4.4",
"wasm-loader": "^1.3.0"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"vite": "^2.6.14"
}
}

2
rustpad-server/src/lib.rs
View File

@ -96,7 +96,7 @@ pub fn server(config: ServerConfig) -> BoxedFilter<(impl Reply,)> {
/// Construct routes for static files from React.
fn frontend() -> BoxedFilter<(impl Reply,)> {
warp::fs::dir("build").boxed()
warp::fs::dir("dist").boxed()
}
/// Construct backend routes, including WebSocket handlers.

12
src/App.tsx
View File

@ -1,5 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { set_panic_hook } from "rustpad-wasm";
import {
Box,
Button,
@ -27,7 +26,7 @@ import {
import useStorage from "use-local-storage-state";
import Editor from "@monaco-editor/react";
import { editor } from "monaco-editor/esm/vs/editor/editor.api";
import raw from "raw.macro";
import rustpadRaw from "../rustpad-server/src/rustpad.rs?raw";
import languages from "./languages.json";
import animals from "./animals.json";
import Rustpad, { UserInfo } from "./rustpad";
@ -36,8 +35,6 @@ import ConnectionStatus from "./ConnectionStatus";
import Footer from "./Footer";
import User from "./User";
set_panic_hook();
function getWsUri(id: string) {
return (
(window.location.origin.startsWith("https") ? "wss://" : "ws://") +
@ -57,8 +54,9 @@ function generateHue() {
function App() {
const toast = useToast();
const [language, setLanguage] = useState("plaintext");
const [connection, setConnection] =
useState<"connected" | "disconnected" | "desynchronized">("disconnected");
const [connection, setConnection] = useState<
"connected" | "disconnected" | "desynchronized"
>("disconnected");
const [users, setUsers] = useState<Record<number, UserInfo>>({});
const [name, setName] = useStorage("name", generateName);
const [hue, setHue] = useStorage("hue", generateHue);
@ -146,7 +144,7 @@ function App() {
[
{
range: model.getFullModelRange(),
text: raw("../rustpad-server/src/rustpad.rs"),
text: rustpadRaw,
},
],
() => null

7
src/Footer.tsx
View File

@ -1,9 +1,10 @@
import { Flex, Icon, Text } from "@chakra-ui/react";
import { VscRemote } from "react-icons/vsc";
const version = process.env.REACT_APP_SHA
? process.env.REACT_APP_SHA.slice(0, 7)
: "development";
const version =
typeof import.meta.env.VITE_SHA === "string"
? import.meta.env.VITE_SHA.slice(0, 7)
: "development";
function Footer() {
return (

6
src/index.tsx
View File

@ -1,10 +1,12 @@
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "@chakra-ui/react";
import init, { set_panic_hook } from "rustpad-wasm";
import App from "./App";
import "./index.css";
// An asynchronous entry point is needed to load WebAssembly files.
import("./App").then(({ default: App }) => {
init().then(() => {
set_panic_hook();
ReactDOM.render(
<StrictMode>
<ChakraProvider>

1
src/react-app-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

12
src/setupProxy.js
View File

@ -1,12 +0,0 @@
const createProxyMiddleware = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://localhost:3030",
changeOrigin: true,
secure: false,
ws: true,
})
);
};

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

19
vite.config.js Normal file
View File

@ -0,0 +1,19 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
build: {
chunkSizeWarningLimit: 1000,
},
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://localhost:3030",
changeOrigin: true,
secure: false,
ws: true,
},
},
},
});