Builtin Vite support for backend #760

haikyuu · 2022-10-28T13:45:18Z

This PR adds support for using Vite as a bundler for backend and front-end Imba projects with no configuration.

What's new?

The vite plugin is now packaged with Imba. import imbaPlugin from 'imba/plugin'
Added an imba test command that is a wrapper of vitest with default configuration
You can now run a server with Imba and have Vite take care of bundling. Here is how that's done imba server.imba --vite. It automatically runs in watch mode and live reloads.
Paths configured in tsconfig.json are automatically picked. This is done by this vite plugin in order to match the built-in bundler behaviour.
Added support for iife imports using import head from "./head.imba?iife"
Added a import {setupVite} from 'imba/plugin' method that sets up vite middleware ++, this is the initial API:

import {setupVite} from 'imba/plugin'
const app = express()
# This looks definitely weird. So that will most probably change in the future
# This does the middleware setup for us, and the callback receives the path of the dist folder
await setupVite app, import.meta.env.MODE, do(dist)
  app.use compression()
  app.use serveStatic(dist, index: false)

app.use "/home", do(req, res)
  let html = <html lang="en">
  <head>
    <script type="module" src="./src/Home.imba">
  <body>
    <Home>
res.status(200).set("Content-Type": "text/html").end String html

Notes

Styles are auto injected in development (and then removed) to fix a flash of unstyled content
In production, each entry point that's detected (static src in a script tag: ./src/Home.imba in the example above) is treated as an entry point and is passed as such to Vite to perform the client build. The script tag is transformed to scripts and styles based on the manifest file.

somebee · 2023-01-04T04:44:58Z

packages/imba/src/imba/setupVite.imba

@@ -0,0 +1,47 @@
+# imba$stdlib=1
+import np from 'path'
+import * as Vite from "vite"


Won't this end up importing vite whenever you run imba in node? Or do you know if it is removed by tree-shaking in esbuild?

Sorry for the late reply 🙂 There seem to be issues related to this

Running a script complains about

❯ imba index.imba ▲ [WARNING] "esbuild" should be marked as external for use with "require.resolve" [require-resolve-not-external] ../imba/packages/imba/node_modules/esbuild/lib/main.js:1718:36: 1718 │ const libMainJS = require.resolve("esbuild"); ╵ ~~~~~~~~~ ✘ [ERROR] No loader is configured for ".node" files: ../imba/packages/imba/node_modules/fsevents/fsevents.node ../imba/packages/imba/node_modules/fsevents/fsevents.js:13:23: 13 │ const Native = require("./fsevents.node"); ╵ ~~~~~~~~~~~~~~~~~ × failed with 1 errors

I removed setupVite from imba directly into imba/plugin. It was indeed causing the issue :) Nice catch

haikyuu · 2023-01-28T05:53:26Z

Rebased with master and fixed a bug where it fails if no tsconfig file is found (We use our own fork while waiting on this PR upstream aleclarson/vite-tsconfig-paths#97)

haikyuu · 2023-01-28T18:58:41Z

Here is a list of things I consider important for complete Vite support

Make sure Vite and its other dependencies don't affect people using the built-in bundler
Fix bug in this PR in above comment
Switch to a single imba.config.js file for configuring the bundling of client, server and tests
Out of the box (no config needed) vite xp for client only, SSR and tests
Support imba serve (no argument (looks for index.html), and with html, imba or js/ts files
Support running scripts once. Now only --watch is supported when using --vite flag.
Add imba preview
Add imba build with no arguments (looks for index.html file)

The first two are mandatory to merge this PR. But the others can be done later in separate PRs

haikyuu · 2023-01-31T15:21:04Z

rebased with master to have a green CI

SSR styles to remove the flash of unstyled content in dev

For now, it is used to skip server live reloading if client side reloading kicked in

haikyuu self-assigned this Oct 28, 2022

haikyuu marked this pull request as ready for review November 3, 2022 09:40

haikyuu requested a review from somebee November 10, 2022 05:20

somebee reviewed Jan 4, 2023

View reviewed changes

haikyuu force-pushed the vite-iife branch from 502ae37 to 3723ef8 Compare January 28, 2023 05:52

haikyuu force-pushed the vite-iife branch from 3064fec to eb09abe Compare January 31, 2023 15:20

haikyuu added 21 commits February 8, 2023 16:42

support iife loader suffix

dc88e15

Add vite middleware e2e test

981bd6a

Add vite middleware e2e test

7ae7f4a

fix svg plugin + add support for worker + web +

7bbbddb

SSR styles to remove the flash of unstyled content in dev

add typescript paths plugin +client default config

78440b2

add esm build of program.imba + externalize pkgs

8cca1f2

alter compilation of <script src="x"> for vite

51bf8c8

add setupVite that operates in a basic linked mode

df13160

For now, it is used to skip server live reloading if client side reloading kicked in

remove vite-plugin dir

87d3071

move vite plugin to imba package

66a4e55

update e2e projects

b29648d

update workflow for vite e2e tests

ce74158

update ignored files

cb8cba1

update e2e tests

f6f749f

finally ...

e9cba4d

auto inject fouc styles in dev mode + remove them

69d03a0

add type declaration for imba.setupVite

7e3a1b5

fix e2e tests in CI

75cc289

comment server options

be404c0

fix test

59760dc

cleanup and fix windows

134a66c

haikyuu and others added 19 commits February 28, 2023 17:00

wip force

60f3094

wip

e1cfe29

add link script

5632013

fix version

3a76943

add info and clean scripts

c2790ac

npm i

c991cd2

clean -> synctest

ad8f56a

update deps in e2e tests

304cfcc

Merge branch 'master' into vite-iife

0ce65f1

fix tests by pinning puppeteer

0171c24

rename inspector to html

368c591

add bundler option in config file

d57d610

imba serve without entry / entry = index.html

334db1b

imba build with no entry / entry = index.html

3606cdd

add port to imba serve + relax deps

8eabf22

Add imba preview command

4b46fc6

Add support for imba serve using vite

6324889

fix slots error with web components (#825)

4816eee

Merge branch 'master' into vite-iife

c9d5156

familyfriendlymikey force-pushed the vite-iife branch from e516918 to c9d5156 Compare March 6, 2023 14:15

familyfriendlymikey and others added 8 commits March 6, 2023 10:25

fix tests (externalize colors)

998e32e

add host option to serve command

fd3ffe8

fix merging config + update vite-node ++

74ded67

Merge branch 'master' into vite-iife

220d566

fix e2e tests and bug with define

84cdba2

remove magic string dependency

21ed192

Merge branch 'master' into vite-iife

f0fc6d5

clean up

db70463

haikyuu merged commit f11d948 into master Mar 31, 2023

haikyuu deleted the vite-iife branch March 31, 2023 12:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Builtin Vite support for backend #760

Builtin Vite support for backend #760

haikyuu commented Oct 28, 2022 •

edited

somebee Jan 4, 2023

haikyuu Jan 28, 2023

haikyuu Jan 28, 2023

haikyuu commented Jan 28, 2023 •

edited

haikyuu commented Jan 28, 2023 •

edited

haikyuu commented Jan 31, 2023

Builtin Vite support for backend #760

Builtin Vite support for backend #760

Conversation

haikyuu commented Oct 28, 2022 • edited

What's new?

Notes

somebee Jan 4, 2023

Choose a reason for hiding this comment

haikyuu Jan 28, 2023

Choose a reason for hiding this comment

haikyuu Jan 28, 2023

Choose a reason for hiding this comment

haikyuu commented Jan 28, 2023 • edited

haikyuu commented Jan 28, 2023 • edited

haikyuu commented Jan 31, 2023

haikyuu commented Oct 28, 2022 •

edited

haikyuu commented Jan 28, 2023 •

edited

haikyuu commented Jan 28, 2023 •

edited