feat(wasm): enable multi entry (#250)

* feat: enable multi entry

* chore: fmt

* chore: lint

* chore: update lock file

crates/rolldown_binding_wasm/src/lib.rs

@@ -1,5 +1,6 @@
 use rolldown_fs::FileSystemVfs;
 use std::panic;
+use std::path::Path;
 
 use wasm_bindgen::prelude::*;
 
@@ -8,13 +9,14 @@ use rolldown::{Bundler, InputItem, InputOptions, OutputOptions};
 pub struct FileItem {
   path: String,
   content: String,
+  is_entry: bool,
 }
 
 #[wasm_bindgen]
 impl FileItem {
   #[wasm_bindgen(constructor)]
-  pub fn new(path: String, content: String) -> Self {
-    Self { path, content }
+  pub fn new(path: String, content: String, is_entry: bool) -> Self {
+    Self { path, content, is_entry }
   }
 }
 
@@ -46,17 +48,20 @@ pub fn bundle(file_list: Vec<FileItem>) -> Vec<AssetItem> {
       let memory_fs = FileSystemVfs::new(
         &file_list.iter().map(|item| (&item.path, &item.content)).collect::<Vec<_>>(),
       );
-      let mut bundler = Bundler::with_plugins_and_fs(
-        InputOptions {
-          input: vec![InputItem {
-            name: Some("basic".to_string()),
-            import: "./index.js".to_string(),
-          }],
-          cwd: "/".into(),
-        },
-        vec![],
-        memory_fs,
-      );
+      let input = file_list
+        .into_iter()
+        .filter_map(|item| {
+          if item.is_entry {
+            let p = Path::new(&item.path);
+            let name = p.file_stem().map(|stem| stem.to_string_lossy().replace('.', "_"));
+            Some(InputItem { name, import: item.path })
+          } else {
+            None
+          }
+        })
+        .collect::<Vec<_>>();
+      let mut bundler =
+        Bundler::with_plugins_and_fs(InputOptions { input, cwd: "/".into() }, vec![], memory_fs);
 
       match bundler.write(OutputOptions::default()).await {
         Ok(assets) => assets

justfile

@@ -35,6 +35,6 @@ bench:
 
 # Use `just wasm-build release` for better performance but also it will cost more time.
 wasm-build mode="dev":
-    cd crates/rolldown_wasm && wasm-pack build --{{ mode }} --target web
+    cd crates/rolldown_binding_wasm && wasm-pack build --{{ mode }} --target web
     -rm -r ./web/wasm
-    mv crates/rolldown_wasm/pkg ./web/wasm
+    mv crates/rolldown_binding_wasm/pkg ./web/wasm

web/playground/src/App.vue

@@ -10,7 +10,12 @@ import {
 import type { ModuleInfo } from './utils/index'
 
 const moduleList: Ref<ModuleInfo[]> = ref([
-  { title: 'index.js', code: `console.log("hello world")` },
+  {
+    title: 'index.js',
+    code: `console.log("hello world")`,
+    isEntry: true,
+    canModifyEntry: false,
+  },
 ])
 
 const outputs: Ref<ModuleInfo[]> = ref([])
@@ -35,8 +40,18 @@ const handleAddModule = () => {
     title,
     code: `console.log("hello world")`,
     autofocus: true,
+    isEntry: false,
+    canModifyEntry: true,
   })
 }
+
+const handleToggleIsEntry = (item: any) => {
+  if (!item.canModifyEntry) {
+    return
+  }
+  item.isEntry = !item.isEntry
+  console.log(item)
+}
 </script>
 
 <template>
@@ -47,14 +62,17 @@ const handleAddModule = () => {
         v-for="item in moduleList"
         :code="item.code"
         :title="item.title"
+        :is-entry="item.isEntry"
         @code="item.code = $event"
-        @title="item.title = $event.target.innerText"
         :auto-focus="item.autofocus"
+        @isEntry="handleToggleIsEntry(item)"
+        :can-modify-entry="item.canModifyEntry"
+        @title="item.title = $event.target.innerText"
       />
       <button @click="handleAddModule">Add module</button>
     </div>
     <!-- output block -->
-    <div class="output column">
+    <div class="outputs column">
       <button @click="handleBuild" :disabled="!wasmLoadFinished">build</button>
       <ModuleBlock
         v-for="item in outputs"

web/playground/src/components/ModuleBlock.vue

@@ -15,6 +15,14 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  isEntry: {
+    type: Boolean,
+    required: false,
+  },
+  canModifyEntry: {
+    type: Boolean,
+    required: false,
+  },
 })
 
 const input = ref(null)
@@ -39,20 +47,45 @@ onMounted(() => {
 
 <template>
   <div>
-    <div
-      class="title"
-      ref="input"
-      contenteditable
-      @input="$emit('title', $event)"
-    >
-      {{ title }}
+    <div class="title-container">
+      <div
+        class="title"
+        :class="{ 'is-entry': !!isEntry }"
+        ref="input"
+        contenteditable
+        @input="$emit('title', $event)"
+      >
+        {{ title }}
+      </div>
+      <button
+        class="entry-flag"
+        v-show="canModifyEntry"
+        @click="$emit('isEntry')"
+      >
+        entry
+      </button>
     </div>
+
     <CodeBlock :code="code" @code="$emit('code', $event)" />
   </div>
 </template>
 
 <style>
+.title-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title.is-entry {
+  background: #5672cdaa;
+  color: white;
+}
+
 .title {
-  margin: auto;
+  flex: 1;
+}
+.entry-flag {
+  outline: none;
+  border: none;
 }
 </style>

web/playground/src/utils/index.ts

@@ -5,19 +5,24 @@ export type ModuleInfo = {
   title: string
   code: string
   autofocus?: boolean
+  isEntry: boolean
+  canModifyEntry?: boolean
 }
 
 export function normalizeModules(modules: ModuleInfo[]): FileItem[] {
   return modules.map(normalizeModule)
 }
 
+// Only used when generate output
 export function convertAssetListToModuleList(
   assetList: AssetItem[],
 ): ModuleInfo[] {
   return assetList.map((item) => {
     return {
       title: item.name,
       code: item.content,
+      isEntry: false,
+      canModifyEntry: false,
     }
   })
 }
@@ -29,11 +34,12 @@ export function convertAssetListToModuleList(
 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)
   }
-  return new FileItem(title, code)
+  return new FileItem(title, code, isEntry)
 }
 
 let moduleId = 1

web/wasm/package.json

@@ -1,19 +1,19 @@
 {
-  "name": "rolldown_wasm",
+  "name": "rolldown_wasm_binding",
   "version": "0.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/rolldown-rs/rolldown"
   },
   "files": [
-    "rolldown_wasm_bg.wasm",
-    "rolldown_wasm.js",
-    "rolldown_wasm.d.ts"
+    "rolldown_wasm_binding_bg.wasm",
+    "rolldown_wasm_binding.js",
+    "rolldown_wasm_binding.d.ts"
   ],
-  "module": "rolldown_wasm.js",
+  "module": "rolldown_wasm_binding.js",
   "homepage": "https://github.com/rolldown-rs/rolldown",
-  "types": "rolldown_wasm.d.ts",
+  "types": "rolldown_wasm_binding.d.ts",
   "sideEffects": [
     "./snippets/*"
   ]