Skip to content

Commit 17fa321

Browse files
committed
improve client-side rendering, plus add todos
1 parent dbfe55d commit 17fa321

File tree

9 files changed

+23
-27
lines changed

9 files changed

+23
-27
lines changed

src/generators/jsx-ast/index.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
name: 'jsx-ast',
1818
version: '1.0.0',
1919
description: 'Generates JSX AST from the input MDAST',
20-
dependsOn: 'ast',
20+
dependsOn: 'metadata',
2121

2222
/**
2323
* Generates a JSX AST

src/generators/web/build/bundle.mjs

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { writeFile } from 'node:fs/promises';
22

33
import esbuild from 'esbuild';
44

5-
import { ESBUILD_RESOLVE_DIR, POLYFILL_PATH } from '../constants.mjs';
5+
import { RESOLVE_DIR } from '../constants.mjs';
6+
import staticData from './data.mjs';
67
import getPlugins from './plugins.mjs';
7-
import staticData from '../server/data.mjs';
88

99
/** @typedef {{ server: boolean, debug: boolean }} BundleOptions */
1010

@@ -17,7 +17,7 @@ import staticData from '../server/data.mjs';
1717
const createConfig = (code, { server, debug }) => ({
1818
stdin: {
1919
contents: code,
20-
resolveDir: ESBUILD_RESOLVE_DIR,
20+
resolveDir: RESOLVE_DIR,
2121
loader: 'jsx',
2222
},
2323
bundle: true,
@@ -27,25 +27,24 @@ const createConfig = (code, { server, debug }) => ({
2727
jsx: 'automatic',
2828
write: false,
2929
outfile: 'output.js',
30-
// When updating the `define` object,
31-
// also update client/types.d.ts to
30+
// When updating the `define` object, also update client/types.d.ts to
3231
// include the newly defined globals
3332
define: {
3433
// Inject static data at build time
3534
__STATIC_DATA__: staticData,
36-
// Use if(CLIENT) or if(SERVER)
37-
// in order to only run code in
38-
// the specific environment, and
39-
// drop it otherwise.
35+
// Use `if (CLIENT)` or `if (SERVER)` to conditionally run code for specific environments,
36+
// and omit it otherwise. The `client/package.json` includes `sideEffects: false` to let
37+
// ESBuild safely tree-shake that directory. However, this doesn't affect dependencies,
38+
// so our tree-shaking ability is limited.
39+
//
40+
// TODO(@avivkeller): Consider switching to Rolldown once it's stable, as it offers
41+
// improved tree-shaking support, with the high-speed of ESBuild.
4042
SERVER: String(server),
4143
CLIENT: String(!server),
4244
},
4345
alias: {
4446
react: 'preact/compat',
4547
'react-dom': 'preact/compat',
46-
// TODO(@avivkeller): Orama _currently_ doesn't support server-side
47-
// rendering, but that is supposed to change in the near future.
48-
...(server && { '@orama/react-components': POLYFILL_PATH }),
4948
},
5049
plugins: getPlugins(server),
5150
metafile: debug,

src/generators/web/build/generate.mjs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ const generateCode = ast => generate(ast).code;
3636
*/
3737
export default () => {
3838
// Create base imports from JSX_IMPORTS configuration
39+
// TODO(@avivkeller): A lot of these imports aren't interactive (i.e. the MetaBar),
40+
// so it would be nice to not pass them to the client at all.
3941
const baseImports = Object.values(JSX_IMPORTS).map(({ name, source }) =>
4042
createImportDeclaration(name, source)
4143
);

src/generators/web/client/components/NavBar.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ const MDXNavBar = () => {
1616
sidebarItemTogglerAriaLabel="Toggle navigation menu"
1717
navItems={[]}
1818
>
19-
<SearchBox />
19+
{/* TODO(@avivkeller): Orama doesn't support Server-Side rendering yet */}
20+
{CLIENT && <SearchBox />}
2021
<ThemeToggle
2122
onClick={toggleTheme}
2223
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"sideEffects": false
3+
}

src/generators/web/constants.mjs

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import { fileURLToPath } from 'node:url';
22

3-
export const ESBUILD_RESOLVE_DIR = fileURLToPath(
4-
new URL('./client', import.meta.url)
5-
);
3+
export const RESOLVE_DIR = fileURLToPath(new URL('./client', import.meta.url));
64

7-
export const POLYFILL_PATH = fileURLToPath(
8-
new URL('./server/polyfill.mjs', import.meta.url)
9-
);
10-
11-
// Imports are relative to ESBUILD_RESOLVE_DIR
5+
// Imports are relative to RESOLVE_DIR
126
export const JSX_IMPORTS = {
137
NavBar: {
148
name: 'NavBar',

src/generators/web/index.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { estreeToBabel } from 'estree-to-babel';
66
import { minify } from 'html-minifier-terser';
77
import Mustache from 'mustache';
88

9-
import { ESBUILD_RESOLVE_DIR } from './constants.mjs';
9+
import { RESOLVE_DIR } from './constants.mjs';
1010
import { TERSER_MINIFY_OPTIONS } from '../../constants.mjs';
1111
import bundleCode from './build/bundle.mjs';
1212
import createASTBuilder from './build/generate.mjs';
@@ -103,7 +103,7 @@ export default {
103103
'utf-8'
104104
);
105105
const astBuilders = createASTBuilder();
106-
const require = createRequire(ESBUILD_RESOLVE_DIR);
106+
const require = createRequire(RESOLVE_DIR);
107107

108108
// Process all entries in parallel
109109
const results = await Promise.all(

src/generators/web/server/polyfill.mjs

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)