refactor(playground): cleanup unused files, replace path-browserify (r…

…olldown#345) * refactor(playground): cleanup unused files & plugins * refactor: replace path-browserify with pathe reduce bundle size, about 3.06 kB
Ailmendra17Stictime · Nov 20, 2023 · e45b1ee · e45b1ee
1 parent ae7ebb5
commit e45b1ee
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 214 deletions.
diff --git a/web/playground/LICENSE-MIT b/web/playground/LICENSE-MIT
diff --git a/web/playground/README.md b/web/playground/README.md
@@ -1,68 +1 @@
-<div align="center">
-
-  <h1><code>create-wasm-app</code></h1>
-
-<strong>An <code>npm init</code> template for kick starting a project that uses NPM packages containing Rust-generated WebAssembly and bundles them with Webpack.</strong>
-
-  <p>
-    <a href="https://travis-ci.org/rustwasm/create-wasm-app"><img src="https://img.shields.io/travis/rustwasm/create-wasm-app.svg?style=flat-square" alt="Build Status" /></a>
-  </p>
-
-  <h3>
-    <a href="#usage">Usage</a>
-    <span> | </span>
-    <a href="https://discordapp.com/channels/442252698964721669/443151097398296587">Chat</a>
-  </h3>
-
-<sub>Built with 🦀🕸 by <a href="https://rustwasm.github.io/">The Rust and WebAssembly Working Group</a></sub>
-
-</div>
-
-## About
-
-This template is designed for depending on NPM packages that contain
-Rust-generated WebAssembly and using them to create a Website.
-
-- Want to create an NPM package with Rust and WebAssembly? [Check out
-  `wasm-pack-template`.](https://github.com/rustwasm/wasm-pack-template)
-- Want to make a monorepo-style Website without publishing to NPM? Check out
-  [`rust-webpack-template`](https://github.com/rustwasm/rust-webpack-template)
-  and/or
-  [`rust-parcel-template`](https://github.com/rustwasm/rust-parcel-template).
-
-## 🚴 Usage
-
-```
-npm init wasm-app
-```
-
-## 🔋 Batteries Included
-
-- `.gitignore`: ignores `node_modules`
-- `LICENSE-APACHE` and `LICENSE-MIT`: most Rust projects are licensed this way, so these are included for you
-- `README.md`: the file you are reading now!
-- `index.html`: a bare bones html document that includes the webpack bundle
-- `index.js`: example js file with a comment showing how to import and use a wasm pkg
-- `package.json` and `package-lock.json`:
-  - pulls in devDependencies for using webpack:
-    - [`webpack`](https://www.npmjs.com/package/webpack)
-    - [`webpack-cli`](https://www.npmjs.com/package/webpack-cli)
-    - [`webpack-dev-server`](https://www.npmjs.com/package/webpack-dev-server)
-  - defines a `start` script to run `webpack-dev-server`
-- `webpack.config.js`: configuration file for bundling your js with webpack
-
-## License
-
-Licensed under either of
-
-- Apache License, Version 2.0, ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
-- MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)
-
-at your option.
-
-### Contribution
-
-Unless you explicitly state otherwise, any contribution intentionally
-submitted for inclusion in the work by you, as defined in the Apache-2.0
-license, shall be dual licensed as above, without any additional terms or
-conditions.
+# Rolldown Playground
diff --git a/web/playground/bootstrap.js b/web/playground/bootstrap.js
diff --git a/web/playground/index.html b/web/playground/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Hello wasm-pack!</title>
+    <title>Rolldown Playground</title>
   </head>
   <body>
     <noscript

diff --git a/web/playground/index.js b/web/playground/index.js
diff --git a/web/playground/package.json b/web/playground/package.json
@@ -2,10 +2,12 @@
   "name": "rolldown-playground",
   "version": "0.1.0",
   "description": "create an app to consume rust-generated wasm packages",
-  "main": "index.js",
+  "type": "module",
+  "private": true,
   "scripts": {
+    "dev": "vite --open",
     "build": "vite build",
-    "start": "vite --open"
+    "preview": "vite preview"
   },
   "keywords": [
     "webassembly",
@@ -15,17 +17,15 @@
   "license": "MIT",
   "homepage": "https://github.com/rolldown-rs/rolldown",
   "devDependencies": {
-    "@types/path-browserify": "^1.0.2",
     "@vitejs/plugin-vue": "^4.4.1",
-    "vite": "^5",
-    "vite-plugin-top-level-await": "^1.3.1"
+    "vite": "^5.0.0"
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@rolldown/wasm-binding": "workspace:*",
     "codemirror": "^6.0.1",
-    "path-browserify": "^1.0.1",
+    "pathe": "^1.1.1",
     "vue": "^3.3.8",
     "vue-codemirror": "^6.1.1"
   }

diff --git a/web/playground/src/App.vue b/web/playground/src/App.vue
@@ -23,7 +23,7 @@ const outputs: Ref<ModuleInfo[]> = ref([])
 const wasmLoadFinished = ref(false)
 
 onMounted(() => {
-  init().then((_) => {
+  init().then(() => {
     wasmLoadFinished.value = true
   })
 })

diff --git a/web/playground/src/components/ModuleBlock.vue b/web/playground/src/components/ModuleBlock.vue
@@ -2,34 +2,16 @@
 import CodeBlock from './CodeBlock.vue'
 import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  code: {
-    type: String,
-    required: true,
-  },
-  autoFocus: {
-    type: Boolean,
-    required: false,
-  },
-  isEntry: {
-    type: Boolean,
-    required: false,
-  },
-  canModifyEntry: {
-    type: Boolean,
-    required: false,
-  },
-  readonly: {
-    type: Boolean,
-    required: false,
-  },
-})
+const props = defineProps<{
+  title: string
+  code: string
+  autoFocus?: boolean
+  isEntry?: boolean
+  canModifyEntry?: boolean
+  readonly?: boolean
+}>()
 
-const input = ref(null)
+const input = ref<HTMLDivElement>()
 
 onMounted(() => {
   if (props.autoFocus && input.value) {
@@ -78,7 +60,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style>
+<style scoped>
 .title-container {
   display: flex;
   justify-content: space-between;

diff --git a/web/playground/src/utils/index.ts b/web/playground/src/utils/index.ts
@@ -1,4 +1,4 @@
-import * as path from 'path-browserify'
+import { isAbsolute, join } from 'pathe'
 import { AssetItem, FileItem } from '@rolldown/wasm-binding'
 
 export type ModuleInfo = {
@@ -35,9 +35,9 @@ function normalizeModule(module: ModuleInfo): FileItem {
   let title = module.title
   let code = module.code
   let isEntry = module.isEntry
-  let isAbsolute = path.isAbsolute(title)
-  if (!isAbsolute) {
-    title = path.join('/', title)
+  let absolute = isAbsolute(title)
+  if (!absolute) {
+    title = join('/', title)
   }
   return new FileItem(title, code, isEntry)
 }

diff --git a/web/playground/vite.config.ts b/web/playground/vite.config.ts
@@ -1,16 +1,7 @@
 import { defineConfig } from 'vite'
 
 import vue from '@vitejs/plugin-vue'
-import topLevelAwait from 'vite-plugin-top-level-await'
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    topLevelAwait({
-      // The export name of top-level await promise for each chunk module
-      promiseExportName: '__tla',
-      // The function to generate import names of top-level await promise in each chunk module
-      promiseImportName: (i) => `__tla_${i}`,
-    }),
-  ],
+  plugins: [vue()],
 })
diff --git a/yarn.lock b/yarn.lock
@@ -1605,18 +1605,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-virtual@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "@rollup/plugin-virtual@npm:3.0.2"
-  peerDependencies:
-    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-  peerDependenciesMeta:
-    rollup:
-      optional: true
-  checksum: 962bc9efece57a07c328a3d093bd1a62b9b4396a88640ac79cfc04181e06b31c4b37726ca27ded71178ace27db9b0085b43c4de823378773bb44cb233ea1340e
-  languageName: node
-  linkType: hard
-
 "@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.3":
   version: 5.0.5
   resolution: "@rollup/pluginutils@npm:5.0.5"
@@ -1867,7 +1855,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/core@npm:^1.3.10, @swc/core@npm:^1.3.22":
+"@swc/core@npm:^1.3.22":
   version: 1.3.96
   resolution: "@swc/core@npm:1.3.96"
   dependencies:
@@ -2086,13 +2074,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/path-browserify@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@types/path-browserify@npm:1.0.2"
-  checksum: 7b26df1a32827f7e588009386f62e0f900e8d349722b1b8b8c100cd2c4cc1e95c64099f5ec879cd131e69869088f336998a3ddb17085b68312414431a4eace01
-  languageName: node
-  linkType: hard
-
 "@types/ps-tree@npm:^1.1.2":
   version: 1.1.5
   resolution: "@types/ps-tree@npm:1.1.5"
@@ -9010,13 +8991,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-browserify@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "path-browserify@npm:1.0.1"
-  checksum: 7e7368a5207e7c6b9051ef045711d0dc3c2b6203e96057e408e6e74d09f383061010d2be95cb8593fe6258a767c3e9fc6b2bfc7ce8d48ae8c3d9f6994cca9ad8
-  languageName: node
-  linkType: hard
-
 "path-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "path-case@npm:3.0.4"
@@ -9906,12 +9880,10 @@ __metadata:
     "@codemirror/lang-javascript": "npm:^6.2.1"
     "@codemirror/theme-one-dark": "npm:^6.1.2"
     "@rolldown/wasm-binding": "workspace:*"
-    "@types/path-browserify": "npm:^1.0.2"
     "@vitejs/plugin-vue": "npm:^4.4.1"
     codemirror: "npm:^6.0.1"
-    path-browserify: "npm:^1.0.1"
-    vite: "npm:^5"
-    vite-plugin-top-level-await: "npm:^1.3.1"
+    pathe: "npm:^1.1.1"
+    vite: "npm:^5.0.0"
     vue: "npm:^3.3.8"
     vue-codemirror: "npm:^6.1.1"
   languageName: unknown
@@ -11531,15 +11503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^9.0.0":
-  version: 9.0.1
-  resolution: "uuid@npm:9.0.1"
-  bin:
-    uuid: dist/bin/uuid
-  checksum: 9d0b6adb72b736e36f2b1b53da0d559125ba3e39d913b6072f6f033e0c87835b414f0836b45bcfaf2bdf698f92297fea1c3cc19b0b258bc182c9c43cc0fab9f2
-  languageName: node
-  linkType: hard
-
 "v8-compile-cache@npm:2.3.0":
   version: 2.3.0
   resolution: "v8-compile-cache@npm:2.3.0"
@@ -11600,20 +11563,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-top-level-await@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "vite-plugin-top-level-await@npm:1.3.1"
-  dependencies:
-    "@rollup/plugin-virtual": "npm:^3.0.1"
-    "@swc/core": "npm:^1.3.10"
-    uuid: "npm:^9.0.0"
-  peerDependencies:
-    vite: ">=2.8"
-  checksum: c4b19d91fb650ea7645ce4fbf5764cfef76e267de153ec0b7764482ac5fbaefbe57c27470392b88be5ecd908fc3419f1654365da385d6ae6a015135ceaf3988c
-  languageName: node
-  linkType: hard
-
-"vite@npm:^3.0.0 || ^4.0.0 || ^5.0.0-0, vite@npm:^3.1.0 || ^4.0.0 || ^5.0.0-0, vite@npm:^5":
+"vite@npm:^3.0.0 || ^4.0.0 || ^5.0.0-0, vite@npm:^3.1.0 || ^4.0.0 || ^5.0.0-0, vite@npm:^5.0.0":
   version: 5.0.0
   resolution: "vite@npm:5.0.0"
   dependencies: