Skip to content

Prebundle src #476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mihkeleidast wants to merge 19 commits into
base: master
Choose a base branch
from
Open

Prebundle src #476

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
0489c9f
Prebundle src
mihkeleidast Mar 2, 2026
ef40c8c
build src with vite
mihkeleidast Mar 2, 2026
5bf2023
remove vite-plugin-lib-assets
mihkeleidast Mar 2, 2026
5261afe
add changeset
mihkeleidast Mar 2, 2026
fb7f867
tsdown bundle
mihkeleidast Mar 2, 2026
c4db00d
ensure components import is after parse-prop-types import
mihkeleidast Mar 2, 2026
e824cd9
refactor to an additional side effect import
mihkeleidast Mar 3, 2026
c8cbd66
move types to devdeps
mihkeleidast Mar 4, 2026
2e87cf9
use separate top-level app directory for output
mihkeleidast Mar 4, 2026
e87fe12
copy template.html over to app dist
mihkeleidast Mar 4, 2026
acb5999
remove babel/preset-typescript from babelrc
mihkeleidast Mar 4, 2026
6b314cf
ignore app dir
mihkeleidast Mar 4, 2026
1259abc
revert babelrc change
mihkeleidast Mar 4, 2026
742a945
no need for types in app
mihkeleidast Mar 4, 2026
92d7ddc
use one tsdown config file with multiple configurations
mihkeleidast Mar 4, 2026
637c673
move back to dist, split utils into its own dir
mihkeleidast Mar 4, 2026
5193fa9
remove babelrc and utils from dist files
mihkeleidast Mar 4, 2026
b2ae33f
fix include path
mihkeleidast Mar 4, 2026
da661f2
move typescript back to deps as it's used by getStaticTypes
mihkeleidast Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"presets": [
"@babel/preset-typescript",
Copy link
Contributor Author

@mihkeleidast mihkeleidast Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, removing this makes jest fail. But this file is part of distributed files, so it may get used by webpack at some point? We wouldn't install the typescript preset for users anymore, so if it's used someway, removing it feels more correct.

Should it be removed from distributed files, or should we provide a separate babel config for jest?

Copy link
Contributor Author

@mihkeleidast mihkeleidast Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like all internal babel uses provide a configuration explicitly, so I don't think it's used, and I'd remove it from dist files.

Copy link
Contributor Author

@mihkeleidast mihkeleidast Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed then. I also removed utils dir from dist files, I think it's some old remnant there, as utils are already compiled to dist and wouldn't be accessible from there anyways due to package#exports.

"@babel/preset-env",
["@babel/preset-react", { "runtime": "automatic" }]
]
Expand Down
5 changes: 5 additions & 0 deletions .changeset/busy-worms-study.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'playroom': minor
---

Improve user-side performance and install size by prebundling source
3 changes: 3 additions & 0 deletions .github/workflows/validate.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ jobs:
- name: Test
run: pnpm test

- name: Build
run: pnpm package

- name: Cypress
run: |
pnpm cypress:verify
Expand Down
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
dist/
app/
cypress/videos/
cypress/screenshots/
cypress/plugins/
Expand Down
1 change: 1 addition & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
cypress/plugins/
cypress/fixtures/
dist
app
pnpm-lock.yaml
2 changes: 1 addition & 1 deletion eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default defineConfig([
},
},
{
ignores: ['**/dist'],
ignores: ['**/dist', '**/app'],
},
{
languageOptions: {
Expand Down
61 changes: 12 additions & 49 deletions lib/makeWebpackConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
const path = require('path');

const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
const { cssFileFilter } = require('@vanilla-extract/integration');
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
Expand All @@ -14,7 +12,7 @@ const makeDefaultWebpackConfig = require('./makeDefaultWebpackConfig');
const playroomPath = path.resolve(__dirname, '..');
const includePaths = [
path.resolve(playroomPath, 'lib'),
path.resolve(playroomPath, 'src'),
path.resolve(playroomPath, 'app'),
path.resolve(playroomPath, 'utils'),
];

Expand All @@ -29,9 +27,9 @@ module.exports = async (playroomConfig, options) => {
const ourConfig = {
mode: options.production ? 'production' : 'development',
entry: {
index: [require.resolve('../src/entries/index.tsx')],
frame: [require.resolve('../src/entries/frame.tsx')],
preview: [require.resolve('../src/entries/preview.tsx')],
index: [require.resolve('../app/index.mjs')],
frame: [require.resolve('../app/frame.mjs')],
preview: [require.resolve('../app/preview.mjs')],
},
output: {
filename: '[name].[contenthash].js',
Expand All @@ -50,22 +48,22 @@ module.exports = async (playroomConfig, options) => {
),
__PLAYROOM_ALIAS__SNIPPETS__: playroomConfig.snippets
? relativeResolve(playroomConfig.snippets)
: require.resolve('./defaultModules/snippets.ts'),
: require.resolve('../app/defaultModules/snippets.mjs'),
__PLAYROOM_ALIAS__THEMES__: playroomConfig.themes
? relativeResolve(playroomConfig.themes)
: require.resolve('./defaultModules/themes.ts'),
: require.resolve('../app/defaultModules/themes.mjs'),
__PLAYROOM_ALIAS__FRAME_COMPONENT__: playroomConfig.frameComponent
? relativeResolve(playroomConfig.frameComponent)
: require.resolve('./defaultModules/FrameComponent.tsx'),
: require.resolve('../app/defaultModules/FrameComponent.mjs'),
__PLAYROOM_ALIAS__USE_SCOPE__: playroomConfig.scope
? relativeResolve(playroomConfig.scope)
: require.resolve('./defaultModules/useScope.ts'),
: require.resolve('../app/defaultModules/useScope.mjs'),
},
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
test: /\.m?js$/,
include: includePaths,
use: [
{
Expand All @@ -76,39 +74,13 @@ module.exports = async (playroomConfig, options) => {
require.resolve('@babel/preset-env'),
{ shippedProposals: true },
],
[
require.resolve('@babel/preset-react'),
{ runtime: 'automatic' },
],
require.resolve('@babel/preset-typescript'),
],
},
},
],
},
{
test: /\.js$/,
include: includePaths,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [
[
require.resolve('@babel/preset-env'),
{ shippedProposals: true },
],
[
require.resolve('@babel/preset-react'),
{ runtime: 'automatic' },
],
],
},
},
],
},
{
test: /(\.vanilla)?\.css$/i,
test: /\.css$/i,
issuer: isPlayroomRepo ? undefined : /node_modules\/playroom/,
use: [
MiniCssExtractPlugin.loader,
Expand Down Expand Up @@ -148,7 +120,7 @@ module.exports = async (playroomConfig, options) => {
filename: 'index.html',
favicon: path.join(__dirname, '../images/favicon.png'),
base: playroomConfig.baseUrl,
template: path.join(__dirname, '../src/entries/template.html'),
template: path.join(__dirname, '../app/template.html'),
}),
new HtmlWebpackPlugin({
title: 'Playroom Frame',
Expand All @@ -163,16 +135,7 @@ module.exports = async (playroomConfig, options) => {
filename: 'preview/index.html',
favicon: path.join(__dirname, '../images/favicon.png'),
publicPath: '../',
template: path.join(__dirname, '../src/entries/template.html'),
}),
new VanillaExtractPlugin({
test: (filePath) => {
// Only apply VanillaExtract plugin to playroom and its dependency's Vanilla Extract modules
return (
cssFileFilter.test(filePath) &&
includePaths.some((includePath) => filePath.startsWith(includePath))
);
},
template: path.join(__dirname, '../app/template.html'),
}),
new MiniCssExtractPlugin({ ignoreOrder: true }),
...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
Expand Down
43 changes: 21 additions & 22 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
"bin": {
"playroom": "bin/cli.cjs"
},
"main": "./dist/index.js",
"main": "./dist/index.cjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"types": "./dist/index.d.cts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js"
"require": "./dist/index.cjs",
"import": "./dist/index.mjs"
},
"./package.json": "./package.json"
},
Expand All @@ -20,7 +20,7 @@
".babelrc",
"images",
"lib",
"src",
"app",
"utils",
"dist"
],
Expand Down Expand Up @@ -50,7 +50,7 @@
"format": "pnpm lint:eslint --fix && prettier --write '**/*.{js,md,ts,tsx}'",
"version": "changeset version",
"release": "pnpm package && changeset publish",
"package": "tsdown",
"package": "tsdown && tsdown --config ./tsdown.app.config.ts",
"test": "jest src lib",
"post-commit-status": "node scripts/postCommitStatus.js",
"deploy-preview": "surge -p ./cypress/projects/themed/dist",
Expand Down Expand Up @@ -80,21 +80,8 @@
"@babel/parser": "^7.23.4",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
Copy link
Contributor Author

@mihkeleidast mihkeleidast Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michaeltaranto I'd appreciate if you could take a hard look at the dependencies, if what I moved to devDeps makes sense, and if anything else could potentially be moved. A bit hard for me to judge, as I don't know what has been added and why.

Also the webpack config and loaders, which I trimmed down - maybe something can be simplified further there as well.

Copy link
Contributor

@michaeltaranto michaeltaranto Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont recall why we have a requirement for @babel/core (unless its a peer dep of something we use).

The @babel/preset-react package is part of the default webpack config we provide for consumers, so we should add that back in.

Can all the @types/* packages be moved to devdeps now?

Copy link
Contributor Author

@mihkeleidast mihkeleidast Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@babel/core is indeed a peerDep requirement for all other babel packages

Copy link
Contributor Author

@mihkeleidast mihkeleidast Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hadn't moved @babel/preset-react, so that should be good already.

Types can indeed move to devDeps, will do so.

"@babel/preset-typescript": "^7.18.6",
"@base-ui/react": "^1.1.0",
"@capsizecss/metrics": "^3.5.0",
"@capsizecss/vanilla-extract": "^2.0.4",
"@soda/friendly-errors-webpack-plugin": "^1.8.1",
"@types/codemirror": "^5.60.5",
"@types/prettier": "^2.7.1",
"@types/react": "^18.0.0 || ^19.0.0",
"@types/react-dom": "^18.0.0 || ^19.0.0",
"@vanilla-extract/css": "^1.9.2",
"@vanilla-extract/css-utils": "^0.1.3",
"@vanilla-extract/dynamic": "^2.1.2",
"@vanilla-extract/integration": "^8.0.4",
"@vanilla-extract/sprinkles": "^1.5.1",
"@vanilla-extract/webpack-plugin": "^2.3.6",
"@zumer/snapdom": "^1.9.14",
"babel-loader": "^9.1.0",
"clsx": "^2.1.1",
Expand Down Expand Up @@ -122,20 +109,31 @@
"scope-eval": "^1.0.0",
"sucrase": "^3.35.1",
"tinyglobby": "^0.2.12",
"typescript": ">=5.0.0",
"use-debounce": "^10.0.0",
"webpack": "^5.75.0",
"webpack-dev-server": "^5.0.2",
"webpack-merge": "^5.8.0"
},
"devDependencies": {
"@actions/core": "^1.10.0",
"@babel/preset-typescript": "^7.18.6",
"@capsizecss/metrics": "^3.5.0",
"@capsizecss/vanilla-extract": "^2.0.4",
"@changesets/changelog-github": "^0.5.1",
"@changesets/cli": "^2.28.1",
"@octokit/rest": "^19.0.5",
"@testing-library/cypress": "^10.1.0",
"@types/codemirror": "^5.60.5",
"@types/jest": "^29.2.4",
"@types/node": "^18.11.9",
"@types/node": "^20.19.30",
"@types/prettier": "^2.7.1",
"@types/react": "^18.0.0 || ^19.0.0",
"@types/react-dom": "^18.0.0 || ^19.0.0",
"@vanilla-extract/css": "^1.9.2",
"@vanilla-extract/css-utils": "^0.1.3",
"@vanilla-extract/dynamic": "^2.1.2",
"@vanilla-extract/rollup-plugin": "^1.5.1",
"@vanilla-extract/sprinkles": "^1.5.1",
"concurrently": "^9.1.2",
"cypress": "^15.5.0",
"eslint": "^9.23.0",
Expand All @@ -148,7 +146,8 @@
"serve": "^14.2.5",
"start-server-and-test": "^2.0.11",
"surge": "^0.24.6",
"tsdown": "^0.12.7"
"tsdown": "^0.20.0",
"typescript": ">=5.0.0"
},
"peerDependencies": {
"react": "^18 || ^19",
Expand Down
Loading
Loading