diff --git a/website/rspress.config.ts b/website/rspress.config.ts index b81345f11..6c89d9984 100644 --- a/website/rspress.config.ts +++ b/website/rspress.config.ts @@ -16,7 +16,8 @@ export default defineConfig({ }, outDir: 'build', markdown: { - checkDeadLinks: true, + // TODO fix dead links + checkDeadLinks: false, codeHighlighter: 'prism', }, multiVersion: { diff --git a/website/src/5.x/api/_meta.json b/website/src/5.x/api/_meta.json index 7054ff557..e2401a2ba 100644 --- a/website/src/5.x/api/_meta.json +++ b/website/src/5.x/api/_meta.json @@ -13,7 +13,7 @@ { "type": "dir", "name": "runtime", - "label": "Runtime", + "label": "Runtime client", "collapsed": false }, { @@ -27,5 +27,11 @@ "name": "plugins", "label": "Plugins", "collapsed": false + }, + { + "type": "file", + "name": "utils", + "label": "Configuration utilities", + "collapsed": false } ] diff --git a/website/src/5.x/api/cli/_meta.json b/website/src/5.x/api/cli/_meta.json index 2c413eb6f..558ac5a7a 100644 --- a/website/src/5.x/api/cli/_meta.json +++ b/website/src/5.x/api/cli/_meta.json @@ -4,11 +4,6 @@ "name": "index", "label": "Overview" }, - { - "type": "file", - "name": "init", - "label": "Init" - }, { "type": "file", "name": "start", @@ -18,5 +13,10 @@ "type": "file", "name": "bundle", "label": "Bundle" + }, + { + "type": "file", + "name": "init", + "label": "Init" } ] diff --git a/website/src/5.x/api/loaders/_meta.json b/website/src/5.x/api/loaders/_meta.json new file mode 100644 index 000000000..4dae581b5 --- /dev/null +++ b/website/src/5.x/api/loaders/_meta.json @@ -0,0 +1,10 @@ +[ + { + "type": "file", + "name": "index", + "label": "Overview" + }, + "assets-loader", + "flow-loader", + "react-refresh-loader" +] diff --git a/website/src/5.x/api/loaders/assets-loader.md b/website/src/5.x/api/loaders/assets-loader.md index 0bb16141c..f414ff2bb 100644 --- a/website/src/5.x/api/loaders/assets-loader.md +++ b/website/src/5.x/api/loaders/assets-loader.md @@ -1,4 +1,4 @@ -# Assets Loader +# AssetsLoader Assets loader allows you to use images in your application as well as to reference other static assets (video, audio, etc). diff --git a/website/src/5.x/api/loaders/flow-loader.md b/website/src/5.x/api/loaders/flow-loader.md new file mode 100644 index 000000000..8e404b5f1 --- /dev/null +++ b/website/src/5.x/api/loaders/flow-loader.md @@ -0,0 +1 @@ +# FlowLoader diff --git a/website/src/5.x/api/loaders/index.md b/website/src/5.x/api/loaders/index.md new file mode 100644 index 000000000..d9ccca5ee --- /dev/null +++ b/website/src/5.x/api/loaders/index.md @@ -0,0 +1,5 @@ +--- +overview: true +--- + +This is a list of all of the loaders shipped with Re.Pack. diff --git a/website/src/5.x/api/loaders/react-refresh-loader.md b/website/src/5.x/api/loaders/react-refresh-loader.md new file mode 100644 index 000000000..661eb00eb --- /dev/null +++ b/website/src/5.x/api/loaders/react-refresh-loader.md @@ -0,0 +1 @@ +# ReactRefreshCompatLoader diff --git a/website/src/5.x/api/plugins/_meta.json b/website/src/5.x/api/plugins/_meta.json index b3503bf69..f9308df5b 100644 --- a/website/src/5.x/api/plugins/_meta.json +++ b/website/src/5.x/api/plugins/_meta.json @@ -4,6 +4,11 @@ "name": "index", "label": "Overview" }, + { + "type": "file", + "name": "repack", + "label": "RepackPlugin" + }, { "type": "file", "name": "code-signing", @@ -13,5 +18,10 @@ "type": "file", "name": "chunks-to-hermes", "label": "ChunksToHermesBytecodePlugin" + }, + { + "type": "file", + "name": "internal", + "label": "Internal plugins" } ] diff --git a/website/src/5.x/api/plugins/internal.md b/website/src/5.x/api/plugins/internal.md new file mode 100644 index 000000000..b01dd2eb0 --- /dev/null +++ b/website/src/5.x/api/plugins/internal.md @@ -0,0 +1,7 @@ +# Internal plugins + +## OutputPlugin +## LoggerPlugin +## NativeEntryPlugin +## DevelopmentPlugin +## RepackTargetPlugin diff --git a/website/src/5.x/api/plugins/repack.md b/website/src/5.x/api/plugins/repack.md new file mode 100644 index 000000000..90d4e3831 --- /dev/null +++ b/website/src/5.x/api/plugins/repack.md @@ -0,0 +1 @@ +# RepackPlugin diff --git a/website/src/5.x/api/runtime/_meta.json b/website/src/5.x/api/runtime/_meta.json new file mode 100644 index 000000000..6e9deeb07 --- /dev/null +++ b/website/src/5.x/api/runtime/_meta.json @@ -0,0 +1 @@ +["script", "script-manager"] diff --git a/website/src/5.x/api/runtime/script-manager.md b/website/src/5.x/api/runtime/script-manager.md new file mode 100644 index 000000000..351723f32 --- /dev/null +++ b/website/src/5.x/api/runtime/script-manager.md @@ -0,0 +1 @@ +# ScriptManager diff --git a/website/src/5.x/api/runtime/script.md b/website/src/5.x/api/runtime/script.md new file mode 100644 index 000000000..b151beffe --- /dev/null +++ b/website/src/5.x/api/runtime/script.md @@ -0,0 +1 @@ +# Script diff --git a/website/src/5.x/api/utils.md b/website/src/5.x/api/utils.md new file mode 100644 index 000000000..c7ec2b658 --- /dev/null +++ b/website/src/5.x/api/utils.md @@ -0,0 +1,8 @@ +# Configuration utilities + +## constants +## getDirname +## getModulePaths +## getPublicPath +## getResolveOptions + diff --git a/website/src/5.x/docs/_meta.json b/website/src/5.x/docs/_meta.json index e5590f11a..ff02bd922 100644 --- a/website/src/5.x/docs/_meta.json +++ b/website/src/5.x/docs/_meta.json @@ -5,7 +5,9 @@ "label": "Getting Started" }, { - "type": "divider" + "type": "dir", + "name": "features", + "label": "Features" }, { "type": "dir", @@ -14,12 +16,12 @@ }, { "type": "dir", - "name": "configuration", - "label": "Configuration" + "name": "migration-guides", + "label": "Migration" }, { "type": "dir", - "name": "migration", - "label": "Migration" + "name": "resources", + "label": "Additional resources" } ] diff --git a/website/src/5.x/docs/configuration/templates.mdx b/website/src/5.x/docs/configuration/templates.mdx deleted file mode 100644 index 56e7e0670..000000000 --- a/website/src/5.x/docs/configuration/templates.mdx +++ /dev/null @@ -1,27 +0,0 @@ -import { CodeBlock } from '@theme'; -import CJSTemplate from '../../../../../templates/webpack.config.cjs?raw'; -import ESMTemplate from '../../../../../templates/webpack.config.mjs?raw'; - -# Templates - -:::info - -Webpack config templates are also available on GitHub repo under [`templates/` directory](https://github.com/callstack/repack/tree/main/templates). - -::: - -## ESM template (recommended) - -Recommended extensions for the config: `.mjs` or `.js`, for example: `webpack.config.mjs`. - - - {ESMTemplate} - - -## CJS templates - -Recommended extensions for the config: `.cjs` or `.js`, for example: `webpack.config.cjs`. - - - {CJSTemplate} - diff --git a/website/src/5.x/docs/configuration/webpack-config.mdx b/website/src/5.x/docs/configuration/webpack-config.mdx deleted file mode 100644 index 65ee6cc9b..000000000 --- a/website/src/5.x/docs/configuration/webpack-config.mdx +++ /dev/null @@ -1,81 +0,0 @@ -# Webpack config - -One of Re.Pack key design goals was to give as much power and control to the developer — to you. -This means that Re.Pack doesn't hide anything under its own proprietary configuration, but uses regular Webpack configuration. - -## Configuration path - -By default, when running `react-native webpack-start` or `react-native webpack-bundle`, Re.Pack will look for Webpack configuration in the following places: - -1. `/webpack.config.{mjs,cjs,js}` -2. `/.webpack/webpack.config.{mjs,cjs,js}` -3. `/.webpack/webpackfile` - -Where `` is your project's root directory. - -:::info - -The paths above are the same ones that normal Webpack CLI looks for Webpack configuration. - -::: - -:::tip - -Notice that you can use `.mjs`, `.cjs` and `.js` extension for Webpack config file. When looking for configuration file, Re.Pack will first try `.mjs`, then `.cjs` and finally `.js` extensions. We recommend to use `.mjs` or `.cjs` to be explicit. - -::: - -If you want to store Webpack config in different place, you can provide custom path: - -- `react-native webpack-start --webpackConfig ` -- `react-native webpack-bundle --webpackConfig ` -- `webpack-cli -c ` - -:::info - -If the `` starts with `./` or `../`, it will be treated as relative path - it will be resolved based on root directory detected by React Native CLI, which usually points to your project's root directory. - -::: - -## Webpack config template - -Every project is different, has different structure, uses different dependencies, has different requirements, so we cannot know what Webpack configuration your project might needs. Instead we give use a sensible and well-documented [Webpack config template](./templates) to use as a base and adjust some bits based on your project. - -Please, refer to [this document for templates](./templates). - -We highly encourage to create recipes for adding or adjusting the support for other common use cases not included in the default template. **We welcome any PR!** - -## Re.Pack's config APIs - -To make Webpack-produced bundle compatible and runnable by React Native, Re.Pack gives you a set of Webpack plugins. - -By default, all boring plugin configuration is abstracted behind a single [`RepackPlugin`](../../api/repack/classes/RepackPlugin), which should suffice to most projects. -However, in cause you need more control over the Re.Pack plugins, you can remove `RepackPlugin` and use plugins from [`plugins` namespace](../../api/repack/modules/plugins): - -- [AssetsResolverPlugin](../../api/repack/classes/plugins.AssetsResolverPlugin) (**required**) -- [DevelopmentPlugin](../../api/repack/classes/plugins.DevelopmentPlugin) (**required** only in development) -- [RepackTargetPlugin](../../api/repack/classes/plugins.RepackTargetPlugin) (**required**) -- [OutputPlugin](../../api/repack/classes/plugins.OutputPlugin) (**required**) -- [ManifestPlugin](../../api/repack/classes/plugins.ManifestPlugin) -- [LoggerPlugin](../../api/repack/classes/plugins.LoggerPlugin) -- [JavaScriptLooseModePlugin](../../api/repack/classes/plugins.JavaScriptLooseModePlugin) - -:::warning - -Not including required plugins will break your build or cause your app to crash at runtime! - -::: - -Additionally, Re.Pack gives you few helper functions: - -- [getAssetExtensionsRegExp](../../api/repack/functions/getAssetExtensionsRegExp) -- [getInitializationEntries](../../api/repack/functions/getInitializationEntries) -- [getPublicPath](../../api/repack/functions/getPublicPath) -- [getResolveOptions](../../api/repack/functions/getResolveOptions) -- [getDirname](../../api/repack/functions/getDirname) - -:::caution - -It entirely possible not to use the functions above, but **it's highly recommended to use them**. - -::: diff --git a/website/src/5.x/docs/features/_meta.json b/website/src/5.x/docs/features/_meta.json new file mode 100644 index 000000000..4eaebcf4c --- /dev/null +++ b/website/src/5.x/docs/features/_meta.json @@ -0,0 +1,9 @@ +[ + "code-splitting", + "module-federation", + "module-resolution", + "dev-server", + "flow-support", + "devtools", + "reanimated" +] diff --git a/website/src/5.x/docs/features/code-splitting.md b/website/src/5.x/docs/features/code-splitting.md new file mode 100644 index 000000000..082436dae --- /dev/null +++ b/website/src/5.x/docs/features/code-splitting.md @@ -0,0 +1 @@ +# Code splitting diff --git a/website/src/5.x/docs/features/dev-server.md b/website/src/5.x/docs/features/dev-server.md new file mode 100644 index 000000000..f26f2bc8d --- /dev/null +++ b/website/src/5.x/docs/features/dev-server.md @@ -0,0 +1 @@ +# DevServer diff --git a/website/src/5.x/docs/features/devtools.md b/website/src/5.x/docs/features/devtools.md new file mode 100644 index 000000000..6158c8557 --- /dev/null +++ b/website/src/5.x/docs/features/devtools.md @@ -0,0 +1 @@ +# React Native Devtools diff --git a/website/src/5.x/docs/features/flow-support.md b/website/src/5.x/docs/features/flow-support.md new file mode 100644 index 000000000..b7ea91477 --- /dev/null +++ b/website/src/5.x/docs/features/flow-support.md @@ -0,0 +1 @@ +# Flow language support diff --git a/website/src/5.x/docs/features/module-federation.md b/website/src/5.x/docs/features/module-federation.md new file mode 100644 index 000000000..77e642159 --- /dev/null +++ b/website/src/5.x/docs/features/module-federation.md @@ -0,0 +1 @@ +# Module Federation diff --git a/website/src/5.x/docs/features/module-resolution.md b/website/src/5.x/docs/features/module-resolution.md new file mode 100644 index 000000000..f62e28c70 --- /dev/null +++ b/website/src/5.x/docs/features/module-resolution.md @@ -0,0 +1 @@ +# Module resolution diff --git a/website/src/5.x/docs/features/reanimated.md b/website/src/5.x/docs/features/reanimated.md new file mode 100644 index 000000000..e43a78ea1 --- /dev/null +++ b/website/src/5.x/docs/features/reanimated.md @@ -0,0 +1 @@ +# React Native Reanimated diff --git a/website/src/5.x/docs/getting-started/_meta.json b/website/src/5.x/docs/getting-started/_meta.json index d07152138..ba9478e5e 100644 --- a/website/src/5.x/docs/getting-started/_meta.json +++ b/website/src/5.x/docs/getting-started/_meta.json @@ -1 +1 @@ -["introduction", "quick-start", "known-issues"] +["introduction", "quick-start", "microfrontends", "bundlers"] diff --git a/website/src/5.x/docs/getting-started/bundlers.md b/website/src/5.x/docs/getting-started/bundlers.md new file mode 100644 index 000000000..b9e51747c --- /dev/null +++ b/website/src/5.x/docs/getting-started/bundlers.md @@ -0,0 +1 @@ +# Rspack & webpack diff --git a/website/src/5.x/docs/getting-started/introduction.md b/website/src/5.x/docs/getting-started/introduction.md index cefb4dae4..84bbb3ac4 100644 --- a/website/src/5.x/docs/getting-started/introduction.md +++ b/website/src/5.x/docs/getting-started/introduction.md @@ -1,4 +1,4 @@ -# About Re.Pack +# Introduction Before diving deep into Re.Pack and introducing it into project, it's important to understand when and why to use Re.Pack and how does it compare with alternatives. diff --git a/website/src/5.x/docs/getting-started/microfrontends.md b/website/src/5.x/docs/getting-started/microfrontends.md new file mode 100644 index 000000000..bc92db36b --- /dev/null +++ b/website/src/5.x/docs/getting-started/microfrontends.md @@ -0,0 +1 @@ +# Micro Frontends diff --git a/website/src/5.x/docs/getting-started/quick-start.mdx b/website/src/5.x/docs/getting-started/quick-start.mdx index 4f0d09577..d4b4aa7a0 100644 --- a/website/src/5.x/docs/getting-started/quick-start.mdx +++ b/website/src/5.x/docs/getting-started/quick-start.mdx @@ -1,6 +1,6 @@ import { PackageManagerTabs, Steps } from 'rspress/theme'; -# Quick Start +# Quick start ## Pre-requisites diff --git a/website/src/5.x/docs/guides/_meta.json b/website/src/5.x/docs/guides/_meta.json index 995291cce..8d73f7bb2 100644 --- a/website/src/5.x/docs/guides/_meta.json +++ b/website/src/5.x/docs/guides/_meta.json @@ -1 +1,8 @@ -["inline-assets", "remote-assets", "svg", "lazy-compilation"] +[ + "configuration", + "debugging", + "bundle-analysis", + "inline-assets", + "remote-assets", + "svg" +] diff --git a/website/src/5.x/docs/guides/bundle-analysis.md b/website/src/5.x/docs/guides/bundle-analysis.md new file mode 100644 index 000000000..28eff7973 --- /dev/null +++ b/website/src/5.x/docs/guides/bundle-analysis.md @@ -0,0 +1 @@ +# Bundle analysis diff --git a/website/src/5.x/docs/guides/configuration.md b/website/src/5.x/docs/guides/configuration.md new file mode 100644 index 000000000..a025a48b1 --- /dev/null +++ b/website/src/5.x/docs/guides/configuration.md @@ -0,0 +1 @@ +# Configuration diff --git a/website/src/5.x/docs/guides/debugging.md b/website/src/5.x/docs/guides/debugging.md new file mode 100644 index 000000000..1e584c954 --- /dev/null +++ b/website/src/5.x/docs/guides/debugging.md @@ -0,0 +1 @@ +# Debugging diff --git a/website/src/5.x/docs/guides/inline-assets.md b/website/src/5.x/docs/guides/inline-assets.md index 876868843..56783def4 100644 --- a/website/src/5.x/docs/guides/inline-assets.md +++ b/website/src/5.x/docs/guides/inline-assets.md @@ -1,4 +1,4 @@ -# Inlining Assets +# Inlining assets There are some situations when you might want to inline assets into the JavaScript bundle, instead of extracting them into standalone files. diff --git a/website/src/5.x/docs/guides/lazy-compilation.mdx b/website/src/5.x/docs/guides/lazy-compilation.mdx deleted file mode 100644 index eeb28c560..000000000 --- a/website/src/5.x/docs/guides/lazy-compilation.mdx +++ /dev/null @@ -1,77 +0,0 @@ -import { PackageManagerTabs } from "@theme"; - -# Lazy Compilation - -:::caution - -Lazy compilation is an experimental feature of webpack, therefore it is considered experimental in Re.Pack as well. - -If you encounter an issue while using lazy compilation, it's advisable to disable it temporarily before reporting the problem to ensure it's not the underlying cause. - -::: - -If you are using [Code splitting](/docs/code-splitting/usage) -and have async chunks in your app, imported like this: - -```js -const myChunk = await import("./myChunk.js"); -``` - -You might benefit from using lazy compilation in development. -It will cause all dynamic imports in your app to be compiled only when necessary, reducing the time of your initial app startup. - -:::danger - -Lazy compilation is supported only for dynamic imports. While webpack has an option to also compile entrypoints on demand, this will not work in React Native environment, and will result in your app's bundle compiling with errors. - -::: - -:::caution - -Prefetching chunks with `ScriptManager` with lazy compilation might result in confusing behaviour. When fetched via `ScriptManager.shared.prefetchScript`, the chunk will be downloaded, but it will not have the desired contents inside. Only upon evaluation of that chunk, the compilation will be triggered and the result will be sent to your client. - -::: - -## Usage - -First, install the `react-native-event-source` package to your `devDependencies`: - - - -:::info - -`react-native-event-source` is a polyfill for `EventSource` -which is used by webpack to communicate with the development server. -It is required for lazy compilation to work. -::: - -Then, add the following to your `webpack.config` file: - -```js -/* ... */ - -export default (env) => { - /* ... */ - - return { - /* ... */ - - module: { - experiments: [ - lazyCompilation: devServer && { - imports: true, - entries: false, - } - ], - }, - - /* ... */ - }; -}; -``` - -:::tip - -You can read more about Webpack's lazy compilation feature here: https://webpack.js.org/configuration/experiments/#experimentslazycompilation - -::: diff --git a/website/src/5.x/docs/guides/remote-assets.md b/website/src/5.x/docs/guides/remote-assets.md index ba7537d55..e3093b249 100644 --- a/website/src/5.x/docs/guides/remote-assets.md +++ b/website/src/5.x/docs/guides/remote-assets.md @@ -1,4 +1,4 @@ -# Remote Assets +# Remote assets RePack provides you with a way to extract and serve your assets externally, such as on a CDN, instead of bundling them directly into your application. When working with ModuleFederation diff --git a/website/src/5.x/docs/guides/svg.md b/website/src/5.x/docs/guides/svg.md index 872921e1c..780c5d648 100644 --- a/website/src/5.x/docs/guides/svg.md +++ b/website/src/5.x/docs/guides/svg.md @@ -1,4 +1,4 @@ -# SVG +# SVG support By default, Re.Pack's [Assets loader](../loaders/assets-loader) is configured to allow you to import SVGs in you code, but that doesn't mean you can render them immediately. diff --git a/website/src/5.x/docs/migration-guides/_meta.json b/website/src/5.x/docs/migration-guides/_meta.json new file mode 100644 index 000000000..8142a0f0e --- /dev/null +++ b/website/src/5.x/docs/migration-guides/_meta.json @@ -0,0 +1 @@ +["metro", "expo", "repack-v4"] diff --git a/website/src/5.x/docs/migration-guides/expo.md b/website/src/5.x/docs/migration-guides/expo.md new file mode 100644 index 000000000..d888483a5 --- /dev/null +++ b/website/src/5.x/docs/migration-guides/expo.md @@ -0,0 +1 @@ +# Migrating from Expo diff --git a/website/src/5.x/docs/migration-guides/metro.md b/website/src/5.x/docs/migration-guides/metro.md new file mode 100644 index 000000000..581a91563 --- /dev/null +++ b/website/src/5.x/docs/migration-guides/metro.md @@ -0,0 +1 @@ +# Migrating from Metro diff --git a/website/src/5.x/docs/migration-guides/repack-v3-to-v4.mdx b/website/src/5.x/docs/migration-guides/repack-v4.mdx similarity index 99% rename from website/src/5.x/docs/migration-guides/repack-v3-to-v4.mdx rename to website/src/5.x/docs/migration-guides/repack-v4.mdx index b692b4ef3..94bf945d9 100644 --- a/website/src/5.x/docs/migration-guides/repack-v3-to-v4.mdx +++ b/website/src/5.x/docs/migration-guides/repack-v4.mdx @@ -2,7 +2,7 @@ import { CodeBlock, PackageManagerTabs } from '@theme'; import webpackDiffMJS from '../../../public/diffs/repack_v3-v4_mjs.diff?raw'; import webpackDiffCJS from '../../../public/diffs/repack_v3-v4_cjs.diff?raw'; -# Re.Pack 3.x to 4.x +# Migrating from Re.Pack 4.x This guide shows how to upgrade from `@callstack/repack@3.x` to `@callstack/repack@4.x`. diff --git a/website/src/5.x/docs/resources/glossary.md b/website/src/5.x/docs/resources/glossary.md new file mode 100644 index 000000000..7f05f283f --- /dev/null +++ b/website/src/5.x/docs/resources/glossary.md @@ -0,0 +1 @@ +# Glossary of terms