diff --git a/src/client/theme/components/SwitchAppearance/index.tsx b/src/client/theme/components/SwitchAppearance/index.tsx
index 4ef72389..3ca64483 100644
--- a/src/client/theme/components/SwitchAppearance/index.tsx
+++ b/src/client/theme/components/SwitchAppearance/index.tsx
@@ -4,7 +4,7 @@ import styles from './index.module.scss';
import SunSvg from './sun.svg';
import MoonSvg from './moon.svg';
-export function SwitchAppearance() {
+export function SwitchAppearance(props: { __island?: boolean }) {
const handleClick = () => {
const classList = document.documentElement.classList;
if (classList.contains('dark')) {
diff --git a/src/client/theme/index.ts b/src/client/theme/index.ts
index 9e741250..cae947e1 100644
--- a/src/client/theme/index.ts
+++ b/src/client/theme/index.ts
@@ -1,10 +1,6 @@
import { Layout } from './layout/Layout';
-import { Counter } from './components/Counter';
import './styles/base.css';
import './styles/vars.css';
+// Tree Shaking
export { Layout };
-
-export const islands = {
- Counter
-};
diff --git a/src/client/theme/islands.ts b/src/client/theme/islands.ts
new file mode 100644
index 00000000..3a246c15
--- /dev/null
+++ b/src/client/theme/islands.ts
@@ -0,0 +1,6 @@
+import { Counter } from './components/Counter';
+import { SwitchAppearance } from './components/SwitchAppearance';
+export default {
+ Counter,
+ SwitchAppearance
+};
diff --git a/src/client/theme/layout/DocLayout/index.tsx b/src/client/theme/layout/DocLayout/index.tsx
index 3ab3b10c..a5a54416 100644
--- a/src/client/theme/layout/DocLayout/index.tsx
+++ b/src/client/theme/layout/DocLayout/index.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { SideBar } from '../../components/Siderbar/index';
import styles from './index.module.scss';
-import { Content } from '/@island/client/Content';
+import { Content } from 'island:client/Content';
import { Aside } from '../../components/Aside/index';
import { DocFooter } from '../../components/DocFooter/index';
diff --git a/src/client/type.d.ts b/src/client/type.d.ts
index bc88aedd..64a56a0b 100644
--- a/src/client/type.d.ts
+++ b/src/client/type.d.ts
@@ -1,19 +1,22 @@
///
-declare module '/@island/theme*' {
+declare module 'island:theme*' {
import { ComponentType, Component } from 'react';
export const Layout: ComponentType
;
- export const islands: Record>;
}
-declare module '/@island/client*' {
+declare module 'island:islands' {
+ export default Record>;
+}
+
+declare module 'island:client*' {
import { ComponentType } from 'react';
export const Content: ComponentType;
}
-declare module 'virtual:routes' {
+declare module 'island:routes' {
import { Route } from 'react-router-dom';
export const routes: Route[];
diff --git a/src/node/build/bundle.ts b/src/node/build/bundle.ts
index 1ff12b2f..e3ae1923 100644
--- a/src/node/build/bundle.ts
+++ b/src/node/build/bundle.ts
@@ -3,6 +3,8 @@ import { build, InlineConfig } from 'vite';
import { CLIENT_ENTRY_PATH, SERVER_ENTRY_PATH, TEMP_PATH } from '../constants';
import { createIslandPlugins } from '../plugin';
import { dynamicImport } from '../utils';
+import { join } from 'path';
+import { copy } from 'fs-extra';
export const okMark = '\x1b[32m✓\x1b[0m';
export const failMark = '\x1b[31m✖\x1b[0m';
@@ -12,10 +14,13 @@ export async function bundle(root: string) {
mode: 'production',
root,
plugins: [createIslandPlugins()],
+ esbuild: {
+ // Reserve island component name
+ minifyIdentifiers: !isServer
+ },
build: {
- minify: false,
ssr: isServer,
- outDir: isServer ? TEMP_PATH : 'dist',
+ outDir: isServer ? join(TEMP_PATH, 'ssr') : 'dist',
cssCodeSplit: false,
ssrManifest: !isServer,
rollupOptions: {
@@ -37,6 +42,10 @@ export async function bundle(root: string) {
spinner.stopAndPersist({
symbol: okMark
});
+ await copy(
+ join(root, TEMP_PATH, 'ssr', 'assets'),
+ join(root, 'dist', 'assets')
+ );
return [clientBundle, serverBundle] as [RollupOutput, RollupOutput];
} catch (e) {
spinner.stopAndPersist({
diff --git a/src/node/build/index.ts b/src/node/build/index.ts
index c02cf282..bb97b245 100644
--- a/src/node/build/index.ts
+++ b/src/node/build/index.ts
@@ -9,8 +9,8 @@ export async function build(root = process.cwd()) {
if (!bundleResult) {
return;
}
- const [clientBundle, _serverBundle] = bundleResult;
+ const [clientBundle, serverBundle] = bundleResult;
const serverEntryPath = join(root, SERVER_OUTPUT_PATH);
const { render } = await dynamicImport(serverEntryPath);
- await renderPage(render, root, clientBundle);
+ await renderPage(render, root, clientBundle, serverBundle);
}
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
index db81459a..f843009c 100644
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@@ -1,17 +1,24 @@
import { join } from 'path';
-import fs from 'fs-extra';
+import fs, { remove } from 'fs-extra';
import type { RollupOutput } from 'rollup';
import { dynamicImport } from '../utils';
import { okMark } from './bundle';
+import { TEMP_PATH } from '../constants';
export async function renderPage(
render: () => { appHtml: string; propsData: string },
root: string,
- clientBundle: RollupOutput
+ clientBundle: RollupOutput,
+ serverBundle: RollupOutput
) {
+ // Island components chunk
const clientChunk = clientBundle.output.find(
(chunk) => chunk.type === 'chunk' && chunk.isEntry
);
+ // We get style from server bundle because it will generate complete css
+ const styleAssets = serverBundle.output.filter(
+ (item) => item.type === 'asset' && item.fileName.endsWith('.css')
+ );
const { default: ora } = await dynamicImport('ora');
const spinner = ora();
spinner.start('Rendering page in server side...');
@@ -29,6 +36,9 @@ export async function renderPage(
${appHtml}
+ ${styleAssets
+ .map((item) => ``)
+ .join('\n')}