getBrowserStyle is used only inside of builder and should not be part of
sdk importable by all component libraries. It also depends on global
types which need to be included in every package dependent on react-sdk.
We generate dts type for each package on publish.
It requires us to include only "src" to output same structure as in src
folder. Though we have configs and cli scripts outside of it which
should be typechecked, they cannot be ignored.
Ideally would be to have one-line commands in package.json. Though
typescript always has problems with build step. In this case the CLI
have everything to configure this except "include" and "exclude" flags.
So here to workaround that I added tsconfig.dts.json to distinct dts
generation and typechecking.
Blocker for https://github.com/webstudio-is/webstudio-builder/pull/1634
While migrating to pnpm I got an issue with our extends relying on
node_modules. pnpm have only symlinks and do not have hoisted
node_modules in the root.
Here I switched extends to package name as all tools can resolve it and
tweaked remix tsconfig to extend from packages folder instead of
node_modules.
Right now our build and CI take a lot of time. 1:40min - 2min on CI and
1min locally. We spend time on vercel, on main CI, on publish and
locally.
At the moment in packages anything outside of src folder is not checked
because of rootDir.
We have to generate "references" field on precommit.
All these issues can be avoided if remove .d.ts generation completely
and specify sources in "types" field. This way we get zero build time
for types and can switch to other build tool (like esbuild) for .js
generation and get almost instant build on vercel, on main CI and on
publish.
Downsides
- it can be slower (actually not really caz we delete .tsbuildinfo cache
anyway and we can still generate it with incremental flag)
- it contraditcs recommended practices for published packages (we can
generate .d.ts in publish script only and use "types" as source
internally)
- [x] - Image optimization component moved into standalone package
- [x] - generate-arg-types moved into standalone package - one issue
with current yarn https://github.com/yarnpkg/yarn/issues/4964 (you need
to delete root node_modules, then yarn and yarn build to make
generate-arg-types to work)
- [x] - move json into `__generated__` folder, (allow import json from
__generated__ folders only)
- [x] - Icons moved all gen into `__generated__`
- [x] - css-data generated content moved to `__generated__`
Our designer bundle heavily bloated with not analyzable commonjs
generated by typescript.
The biggest problem comes from bundled icons library which esbuild
cannot tree shake because of cjs.
Another issue is broken code splitting. Packages in one piece are appear
in chunks and always loaded even with dynamic import and React.lazy.
To solve this I migrated each package to native node es modules.
Storybook and jest work almost without changes. Though it's not possible
to run remix in esm project (while still esm packages can be bundled for
ssr). And as a result designer jest failed because of cjs tests requires
from esm packages. As a solution I generated additional commonjs
artifacts in lib/cjs.
du -ck public/build
2336
1736
Here "include" often have list of extensions and forgotten .tsx so such
modules are left unchecked. Replaced with just "src" which consider all
typescript extensions.
Ideally stop using tsc to build artifacts, switch to esbuild and remove
complex configuration from all tsconfig.json.
Bogdan Chadkin