((resolve) =>
5 | setTimeout(() => resolve("loaded!"), 500),
6 | );
7 | }
8 |
9 | export function AsyncData() {
10 | const [data] = createResource(fetchData);
11 | return {data} ;
12 | }
13 |
--------------------------------------------------------------------------------
/examples/solid/src/Counter.island.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from "solid-js";
2 |
3 | type Props = {
4 | start?: number;
5 | };
6 |
7 | export default function Counter({ start = 0 }: Props) {
8 | const [counter, setCounter] = createSignal(start);
9 | return (
10 |
11 | setCounter((c) => c - 1)}>-
12 | {counter()}
13 | setCounter((c) => c + 1)}>+
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/solid/src/Expandable.island.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from "solid-js";
2 |
3 | import StaticContent from "./StaticContent.lagoon.jsx";
4 |
5 | type Props = {
6 | title: string;
7 | children?: any;
8 | };
9 |
10 | export default function Expandable({ title, children }: Props) {
11 | const [expanded, setExpanded] = createSignal(false);
12 | return (
13 |
14 |
15 | This is static content inside an island. We call this a lagoon.
16 |
17 |
setExpanded((expanded) => !expanded)}>
18 | {title}
19 |
20 |
21 |
22 | This a second lagoon. Below you see the children that were passed to
23 | the Expandable island:
24 |
25 | {children}
26 |
27 |
11 |
12 | Partial hydration with SolidJS and Capri
13 |
14 | This page is static, but contains some dynamic parts.
15 |
16 | This counter is an interactive island:
18 |
19 | And here is another one, independent from the one above:{" "}
20 |
22 |
23 | This island receives children as prop. They are only rendered upon build
24 | time.
25 |
26 | The code for ServerContent won't show up in the client
27 | bundle.
28 |
29 |
30 | Link to another page
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/solid/src/MediaQuery.island.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal, onMount } from "solid-js";
2 |
3 | export const options = {
4 | media: "(max-width:500px)",
5 | };
6 |
7 | export default function MediaQuery() {
8 | const [content, setContent] = createSignal(
9 | "Resize your browser below 500px to hydrate this island.",
10 | );
11 | onMount(() => {
12 | setContent("The island has been hydrated.");
13 | });
14 | return {content}
;
15 | }
16 |
--------------------------------------------------------------------------------
/examples/solid/src/ServerContent.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | children: any;
3 | };
4 |
5 | export function ServerContent({ children }: Props) {
6 | if (!children) {
7 | throw new Error("TEST: THIS CODE MUST NOT SHOW UP IN THE CLIENT BUNDLE");
8 | }
9 | return {children}
;
10 | }
11 |
--------------------------------------------------------------------------------
/examples/solid/src/StaticContent.lagoon.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | children?: any;
3 | };
4 |
5 | export default function StaticContent({ children }: Props) {
6 | return {children}
;
7 | }
8 |
--------------------------------------------------------------------------------
/examples/solid/src/capri.svg:
--------------------------------------------------------------------------------
1 |
10 |
12 | ));
13 | return {
14 | "#app": html,
15 | body: generateHydrationScript(),
16 | };
17 | };
18 |
--------------------------------------------------------------------------------
/examples/solid/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { Router } from "@solidjs/router";
2 | import { render } from "solid-js/web";
3 |
4 | import { App } from "./App";
5 |
6 | render(
7 | () => (
8 |
9 |
11 | ),
12 | document.getElementById("app")!,
13 | );
14 |
--------------------------------------------------------------------------------
/examples/solid/src/vite.d.ts:
--------------------------------------------------------------------------------
1 | import "vite";
2 |
3 | declare module "vite" {
4 | export interface UserConfig {
5 | ssr?: SSROptions;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/examples/solid/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "noEmit": true,
5 | "target": "ESNext",
6 | "module": "ESNext",
7 | "moduleResolution": "Node",
8 | "esModuleInterop": true,
9 | "jsx": "preserve",
10 | "jsxImportSource": "solid-js",
11 | "types": ["vite/client"]
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/examples/solid/vite.config.ts:
--------------------------------------------------------------------------------
1 | import capri from "@capri-js/solid";
2 | import { defineConfig } from "vite";
3 | import solid from "vite-plugin-solid";
4 |
5 | export default defineConfig({
6 | ssr: {
7 | // In order to make solid-app-router work in SSR mode we have to
8 | // prevent it from being externalized ...
9 | noExternal: ["solid-app-router"],
10 | },
11 | plugins: [
12 | solid({
13 | ssr: true,
14 | }),
15 | capri({
16 | spa: "/preview",
17 | }),
18 | ],
19 | });
20 |
--------------------------------------------------------------------------------
/examples/svelte/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | dist/
3 | node_modules/
--------------------------------------------------------------------------------
/examples/svelte/capri.svg:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/svelte/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-capri-svelte-site",
3 | "private": true,
4 | "description": "Capri Svelte example",
5 | "version": "1.0.0",
6 | "license": "MIT",
7 | "type": "module",
8 | "scripts": {
9 | "dev": "vite dev",
10 | "build": "vite build && vite build --ssr",
11 | "preview": "vite preview"
12 | },
13 | "dependencies": {
14 | "@capri-js/svelte": "^2.1.1",
15 | "svelte-pilot": "^0.3.1",
16 | "svelte-preprocess": "^4.10.7"
17 | },
18 | "devDependencies": {
19 | "@sveltejs/vite-plugin-svelte": "^2.0.2",
20 | "svelte": "^3.48.0",
21 | "vite": "^4.0.0"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/svelte/src/About.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
29 |
30 |
31 | This page is completely static.
32 |
33 | An since it does not contain any interactive islands, no JavaScript is
34 | shipped to the browser. Async data: {ssrState}
35 |
36 | Home
37 |
38 |
--------------------------------------------------------------------------------
/examples/svelte/src/Counter.island.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | counter--}>-
7 | {counter}
8 | counter++}>+
9 |
10 |
11 |
17 |
--------------------------------------------------------------------------------
/examples/svelte/src/Expandable.island.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
(expanded = !expanded)}>
10 |
12 |
13 |
14 | This a second lagoon. Below you see the body slot that was passed to the
15 | Expandable island:
16 |
17 |
19 |
10 |
11 | Partial hydration with Svelte and Capri
12 |
13 | This page is static, but contains some dynamic parts.
14 |
15 | Here is a simple counter:
17 |
18 | And here is another one, independent from the one above:
22 |
23 | Click to expand
24 |
25 |
26 | The code for ServerContent won't show up in the client bundle.
27 |
28 |
29 |
30 | Link to another page
32 |
33 |
--------------------------------------------------------------------------------
/examples/svelte/src/MediaQuery.island.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
14 |
15 |
16 | {content}
17 |
18 |
--------------------------------------------------------------------------------
/examples/svelte/src/ServerContent.svelte:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/examples/svelte/src/StaticContent.lagoon.svelte:
--------------------------------------------------------------------------------
1 |
2 | This is static content inside an island. We call this a lagoon.
3 |
4 |
--------------------------------------------------------------------------------
/examples/svelte/src/capri.svg:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/vercel/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-capri-react-vercel-site",
3 | "private": true,
4 | "description": "Capri React on Vercel example",
5 | "version": "1.0.0",
6 | "license": "MIT",
7 | "type": "module",
8 | "scripts": {
9 | "dev": "vite dev",
10 | "build": "vite build && vite build --ssr",
11 | "preview": "vite preview"
12 | },
13 | "dependencies": {
14 | "@vitejs/plugin-react": "^3.0.0",
15 | "react": "^18.1.0",
16 | "react-dom": "^18.1.0",
17 | "react-router-dom": "^6.3.0"
18 | },
19 | "devDependencies": {
20 | "@capri-js/react": "^5.2.0",
21 | "@capri-js/vercel": "^1.1.0",
22 | "@types/react": "^18.0.9",
23 | "@types/react-dom": "^18.0.4",
24 | "vite": "^4.0.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/examples/vercel/src/About.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | export function About() {
4 | return (
5 |
6 | This page was server-rendered on {new Date().toLocaleString()}
7 |
8 | An since it does not contain any interactive islands, no JavaScript is
9 | shipped to the browser.
10 |
11 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/vercel/src/App.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | min-height: 100%;
4 | padding: 0;
5 | margin: 0;
6 | background: #fafafa;
7 | font-family: "Helvetica Neue", arial, sans-serif;
8 | font-weight: 400;
9 | color: #444;
10 | }
11 |
12 | main {
13 | max-width: 60ch;
14 | margin: auto;
15 | font-size: 1.5em;
16 | line-height: 1.5;
17 | padding: 2em;
18 | }
19 |
20 | h1 {
21 | line-height: 1.1;
22 | }
23 | h1 i {
24 | font-style: normal;
25 | }
26 | h1 i::after {
27 | content: "";
28 | display: inline-block;
29 | width: 0.8em;
30 | height: 0.8em;
31 | margin-left: 0.25ch;
32 | background: url("./capri.svg") no-repeat;
33 | background-size: contain;
34 | }
35 |
36 | section {
37 | margin-bottom: 1em;
38 | }
39 |
40 | button {
41 | font-family: inherit;
42 | font-size: 0.7em;
43 | padding: 0.5em 1em;
44 | background: #15992b;
45 | color: #fff;
46 | border: none;
47 | border-radius: 4px;
48 | }
49 | button:hover {
50 | background: #56c13f;
51 | }
52 |
53 | .counter {
54 | display: inline-flex;
55 | align-items: center;
56 | gap: 0.2em;
57 | }
58 |
59 | .expandable button::after {
60 | display: inline-block;
61 | margin-left: 0.5em;
62 | content: ">";
63 | transition: all 0.2s ease-in-out;
64 | }
65 | .expandable[data-expanded="true"] > button::after {
66 | transform: rotateZ(90deg);
67 | }
68 |
69 | .expandable-content {
70 | overflow: hidden;
71 | margin: 0.5em 0;
72 | }
73 | [data-expanded="false"] > .expandable-content {
74 | height: 0;
75 | }
76 |
77 | a {
78 | color: inherit;
79 | }
80 |
81 | .box {
82 | padding: 1em;
83 | border: 1px solid #aaa;
84 | border-radius: 6px;
85 | margin: 1em 0;
86 | }
87 |
88 | .banner {
89 | background: #ff0f7f;
90 | color: #fff;
91 | padding: 0.5rem;
92 | text-transform: uppercase;
93 | font-size: 0.8rem;
94 | }
95 |
--------------------------------------------------------------------------------
/examples/vercel/src/App.tsx:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 |
3 | import { Suspense } from "react";
4 | import { Route, Routes } from "react-router-dom";
5 |
6 | import { About } from "./About";
7 | import { Home } from "./Home";
8 | import { Preview } from "./Preview.jsx";
9 |
10 | export function App() {
11 | return (
12 |
13 |
14 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/examples/vercel/src/Counter.island.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | type Props = {
4 | start?: number;
5 | };
6 |
7 | export default function Counter({ start = 0 }: Props) {
8 | const [counter, setCounter] = useState(start);
9 | return (
10 |
11 | setCounter((c) => c - 1)}>-
12 | {counter}
13 | setCounter((c) => c + 1)}>+
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/vercel/src/Expandable.island.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode, useState } from "react";
2 |
3 | import StaticContent from "./StaticContent.lagoon.jsx";
4 |
5 | type Props = {
6 | title: string;
7 | children?: ReactNode;
8 | };
9 | export default function Expandable({ title, children }: Props) {
10 | const [expanded, setExpanded] = useState(false);
11 | return (
12 |
13 |
14 | This is static content inside an island. We call this a lagoon.
15 |
16 |
setExpanded(!expanded)}>{title}
17 |
18 |
19 | This a second lagoon. Below you see the children that were passed to
20 | the Expandable island:
21 |
22 | {children}
23 |
24 |
11 |
12 | Partial hydration with React and Capri
13 |
14 |
15 | This page was server-rendered on {new Date().toLocaleString()}
16 |
17 |
18 | Here is a simple counter:
20 |
21 | And here is another one, independent from the one above:{" "}
22 |
24 |
25 | This island receives children as prop. They are only rendered upon build
26 | time.
27 |
28 | The code for ServerContent won't show up in the client
29 | bundle.
30 |
31 |
32 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/examples/vercel/src/MediaQuery.island.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export const options = {
4 | media: "(max-width:500px)",
5 | };
6 |
7 | export default function MediaQuery() {
8 | const [content, setContent] = useState(
9 | "Resize your browser below 500px to hydrate this island.",
10 | );
11 | useEffect(() => {
12 | setContent("The island has been hydrated.");
13 | }, []);
14 | return {content}
;
15 | }
16 |
--------------------------------------------------------------------------------
/examples/vercel/src/Preview.tsx:
--------------------------------------------------------------------------------
1 | import { Navigate } from "react-router-dom";
2 |
3 | /**
4 | * Handle preview requests like `/preview?slug=/about` by redirecting
5 | * to the given slug parameter.
6 | */
7 | export function Preview() {
8 | const url = new URL(window.location.href);
9 | const slug = url.searchParams.get("slug") ?? "/";
10 | return Preview Mode
;
18 | }
19 |
--------------------------------------------------------------------------------
/examples/vercel/src/ServerContent.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | type Props = {
4 | children: ReactNode;
5 | };
6 |
7 | export function ServerContent({ children }: Props) {
8 | return {children}
;
9 | }
10 |
--------------------------------------------------------------------------------
/examples/vercel/src/StaticContent.lagoon.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | type Props = {
4 | children?: ReactNode;
5 | };
6 |
7 | export default function StaticContent({ children }: Props) {
8 | return {children}
;
9 | }
10 |
--------------------------------------------------------------------------------
/examples/vercel/src/capri.svg:
--------------------------------------------------------------------------------
1 |
12 |
13 |
15 | ,
16 | ),
17 | };
18 | };
19 |
--------------------------------------------------------------------------------
/examples/vercel/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import { App } from "./App";
6 | import { PreviewBanner } from "./Preview.jsx";
7 |
8 | ReactDOM.createRoot(document.getElementById("app")!).render(
9 |
10 |
11 |
14 | ,
15 | );
16 |
--------------------------------------------------------------------------------
/examples/vercel/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "noEmit": true,
5 | "module": "ES2020",
6 | "moduleResolution": "Node",
7 | "target": "ES2017",
8 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
9 | "types": ["vite/client"],
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "jsx": "preserve"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/examples/vercel/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "build": {
3 | "env": {
4 | "ENABLE_VC_BUILD": "1"
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/examples/vercel/vite.config.ts:
--------------------------------------------------------------------------------
1 | import capri from "@capri-js/react";
2 | import vercel from "@capri-js/vercel";
3 | import react from "@vitejs/plugin-react";
4 | import { defineConfig } from "vite";
5 |
6 | export default defineConfig({
7 | plugins: [
8 | react(),
9 | capri({
10 | spa: "/preview",
11 | prerender: false,
12 | target: vercel({
13 | isg: {
14 | expiration: 60,
15 | },
16 | }),
17 | }),
18 | ],
19 | });
20 |
--------------------------------------------------------------------------------
/examples/vue/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | dist/
3 | node_modules/
--------------------------------------------------------------------------------
/examples/vue/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-capri-vue-site",
3 | "private": true,
4 | "description": "Capri Vue example",
5 | "version": "1.0.0",
6 | "license": "MIT",
7 | "type": "module",
8 | "scripts": {
9 | "dev": "vite dev",
10 | "build": "vite build && vite build --ssr",
11 | "preview": "vite preview"
12 | },
13 | "dependencies": {
14 | "vue": "^3.2.37",
15 | "vue-router": "^4.1.6"
16 | },
17 | "devDependencies": {
18 | "@capri-js/vue": "^2.1.1",
19 | "@vitejs/plugin-vue": "^4.0.0",
20 | "typescript": "^4.7.4",
21 | "vite": "^4.0.0",
22 | "vue-tsc": "^0.38.1"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/vue/src/About.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | This page is completely static.
7 |
8 | An since it does not contain any interactive islands, no JavaScript is
9 | shipped to the browser. Async data:
10 |
11 | Loading...
14 |
15 | Home
16 |
17 |
18 |
--------------------------------------------------------------------------------
/examples/vue/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/examples/vue/src/AsyncData.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 | {{ data }}
12 |
13 |
--------------------------------------------------------------------------------
/examples/vue/src/Counter.island.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | -
14 | {{ count }}
15 | +
16 |
17 |
18 |
19 |
37 |
--------------------------------------------------------------------------------
/examples/vue/src/Expandable.island.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 | Title
12 |
13 |
14 |
15 | This a second lagoon. Below you see the body slot that was passed to the
16 | Expandable island:
17 |
18 | Body
19 |
20 |
22 |
23 |
56 |
--------------------------------------------------------------------------------
/examples/vue/src/Home.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | Partial hydration with Vue and Capri
10 | This page is static, but contains some dynamic parts.
11 | Here is a simple counter:
12 |
13 | And here is another one, independent from the one above:
14 |
16 |
17 | Click to expand
18 |
19 |
20 | The code for ServerContent won't show up in the client
21 | bundle.
22 |
23 |
24 |
25 | Another page
27 |
28 |
29 |
--------------------------------------------------------------------------------
/examples/vue/src/MediaQuery.island.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
16 |
17 |
18 | {{ content }}
19 |
20 |
--------------------------------------------------------------------------------
/examples/vue/src/PreviewApp.vue:
--------------------------------------------------------------------------------
1 |
2 | Preview
3 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/examples/vue/src/ServerContent.vue:
--------------------------------------------------------------------------------
1 |
2 | Empty
3 |
4 |
--------------------------------------------------------------------------------
/examples/vue/src/StaticContent.lagoon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | This is static content inside an island. We call this a lagoon.
4 |
5 |
6 |
--------------------------------------------------------------------------------
/examples/vue/src/capri.svg:
--------------------------------------------------------------------------------
1 | ,
5 | Record,
6 | unknown
7 | >;
8 | export default component;
9 | }
10 |
--------------------------------------------------------------------------------
/examples/vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "noEmit": true,
5 | "allowJs": true,
6 | "module": "ES2020",
7 | "moduleResolution": "Node",
8 | "target": "ES2017",
9 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
10 | "types": ["vite/client"],
11 | "skipLibCheck": true,
12 | "esModuleInterop": true,
13 | "jsx": "preserve"
14 | },
15 | "include": ["vite.config.ts", "src"]
16 | }
17 |
--------------------------------------------------------------------------------
/examples/vue/vite.config.ts:
--------------------------------------------------------------------------------
1 | import capri from "@capri-js/vue";
2 | import vue from "@vitejs/plugin-vue";
3 | import { defineConfig } from "vite";
4 |
5 | export default defineConfig({
6 | plugins: [
7 | vue(),
8 | capri({
9 | spa: "/preview",
10 | }),
11 | ],
12 | });
13 |
--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 | ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri"
9 | },
10 | "license": "MIT",
11 | "type": "module",
12 | "main": "./lib/index.js",
13 | "files": [
14 | "lib",
15 | "ssr.d.ts"
16 | ],
17 | "exports": {
18 | ".": {
19 | "default": "./lib/index.js"
20 | },
21 | "./context": {
22 | "default": "./lib/context.js"
23 | },
24 | "./vite-plugin": {
25 | "default": "./lib/vite-plugin.js"
26 | }
27 | },
28 | "typesVersions": {
29 | "*": {
30 | "index.d.ts": [
31 | "lib/index.d.ts"
32 | ],
33 | "context": [
34 | "lib/context.d.ts"
35 | ],
36 | "vite-plugin": [
37 | "lib/vite-plugin.d.ts"
38 | ],
39 | "ssr": [
40 | "ssr.d.ts"
41 | ]
42 | }
43 | },
44 | "dependencies": {
45 | "cheerio": "^1.0.0-rc.11",
46 | "esbuild": "^0.19.11",
47 | "micromatch": "^4.0.5",
48 | "node-fetch": "^3.3.2",
49 | "url-join": "^5.0.0",
50 | "web-streams-polyfill": "^3.3.2"
51 | },
52 | "devDependencies": {
53 | "@types/micromatch": "^4.0.6",
54 | "vite": "^4.0.0"
55 | },
56 | "peerDependencies": {
57 | "vite": "^4.0.0"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/packages/capri/src/Template.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Template to analyze and modify the HTML.
3 | */
4 | export class Template {
5 | private html: string;
6 |
7 | constructor(html: string) {
8 | this.html = html;
9 | }
10 |
11 | /**
12 | * Find all hydration scripts and return their data-island attribute and
13 | * their text content.
14 | */
15 | getIslands() {
16 | return [
17 | ...this.html.matchAll(
18 | /]+data-island="(.+?)"[^>]*>([\s\S]+?)<\/script>/gi,
19 | ),
20 | ].map(([, island, json]) => ({ island, json }));
21 | }
22 |
23 | /**
24 | * Remove all script tags with matching src or text.
25 | */
26 | removeScripts(test: { src?: RegExp; text?: RegExp }) {
27 | this.html = this.html.replace(
28 | /<\s*script(.*?)>([\s\S]*?)<\s*\/\s*script\s*>\s*/gi,
29 | (match, attrs, text) => {
30 | if (test.src) {
31 | const [, src] = /\bsrc\s*=\s*"(.+?)"/.exec(attrs) ?? [];
32 | if (src && src.match(test.src)) return "";
33 | }
34 | if (test.text && text.match(test.text)) {
35 | return "";
36 | }
37 | return match;
38 | },
39 | );
40 | }
41 |
42 | /**
43 | * Insert markup into the html with the keys being CSS selectors.
44 | */
45 | insertMarkup(markup: Record) {
46 | for (const [selector, insert] of Object.entries(markup)) {
47 | if (insert) {
48 | if (!selector.match(/^#?[\w]+$/)) {
49 | throw new Error(`Unsupported selector: ${selector}`);
50 | }
51 | if (selector.startsWith("#")) {
52 | // id selector - insert after the opening tag
53 | this.html = this.html.replace(
54 | new RegExp(`\\bid\\s*=\\s*"${selector.slice(1)}"[^>]*>`),
55 | `$&${insert}`,
56 | );
57 | } else {
58 | // type selector - insert before the closing tag
59 | this.html = this.html.replace(
60 | new RegExp(`<\\s*/\\s*${selector}[^>]*>`),
61 | `${insert}$&`,
62 | );
63 | }
64 | }
65 | }
66 | }
67 |
68 | /**
69 | * Return the HTML.
70 | */
71 | toString() {
72 | return this.html;
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/packages/capri/src/assets.ts:
--------------------------------------------------------------------------------
1 | import type { OutputAsset, OutputBundle, OutputChunk } from "rollup";
2 | import type { Plugin } from "vite";
3 |
4 | export function serverAssetsPlugins(): Plugin[] {
5 | let ssrBuild = false;
6 | let base: string;
7 |
8 | const serverAssets: OutputBundle = {};
9 |
10 | return [
11 | /**
12 | * Vite does not emit assets for SSR builds, assuming that they are emitted
13 | * by the client build. For Capri, this is only the case if we are building
14 | * the preview SPA, which is optional. Normally, the client build will only
15 | * include the islands and the hydration code. We therefore add this plugin
16 | * to save the server assets so that we can restore them later on (see next
17 | * plugin).
18 | */
19 | {
20 | enforce: "pre",
21 | name: "capri-save-assets",
22 | config(cfg) {
23 | ssrBuild = !!cfg.build?.ssr;
24 | base = cfg.base ?? process.env.BASE_URL ?? "/";
25 | },
26 | generateBundle(options, bundle) {
27 | if (ssrBuild) {
28 | for (const file in bundle) {
29 | const chunk = bundle[file];
30 | if (chunk.type === "asset" && !file.includes("ssr-manifest.json")) {
31 | serverAssets[file] = chunk;
32 | }
33 | }
34 | }
35 | },
36 | },
37 |
38 | /**
39 | * This plugin restores the assets that were saved by the previous one and
40 | * were meanwhile deleted by Vite's asset plugin:
41 | * https://github.com/vitejs/vite/blob/f12a1ab/packages/vite/src/node/plugins/asset.ts#L189
42 | */
43 | {
44 | enforce: "post",
45 | name: "capri-restore-assets",
46 | generateBundle(options, bundle) {
47 | if (ssrBuild) {
48 | // Add the assets back to the bundle so that Vite will emit the files
49 | Object.assign(bundle, serverAssets);
50 |
51 | const css = getCssUrls(serverAssets, base);
52 | const ssrChunk = getSSRChunk(bundle);
53 |
54 | // We have to rewrite the code here, after the bundling has finished.
55 | // If the chunk had a source map, this would mess it up and we would
56 | // need to use a library like magic-string.
57 | // For now this naive approach seems fine.
58 | ssrChunk.code = ssrChunk.code.replace(
59 | "__CSS_ASSETS__",
60 | JSON.stringify(css),
61 | );
62 | }
63 | },
64 | },
65 | ];
66 | }
67 |
68 | function getSSRChunk(bundle: OutputBundle) {
69 | const chunk = Object.values(bundle)
70 | .filter(isOutputChunk)
71 | .find((c) => c.name === "ssr");
72 |
73 | if (!chunk) throw new Error("Can't find SSR chunk.");
74 | return chunk;
75 | }
76 |
77 | function isOutputChunk(chunk: OutputAsset | OutputChunk): chunk is OutputChunk {
78 | return chunk.type === "chunk";
79 | }
80 |
81 | function getCssUrls(serverAssets: OutputBundle, base = "/") {
82 | return Object.keys(serverAssets)
83 | .filter((f) => f.endsWith(".css"))
84 | .map((f) => `${base}${f}`);
85 | }
86 |
--------------------------------------------------------------------------------
/packages/capri/src/bundle.ts:
--------------------------------------------------------------------------------
1 | import esbuild, { Plugin } from "esbuild";
2 |
3 | export interface BundleOptions {
4 | target?: string;
5 | platform?: "browser" | "node" | "neutral";
6 | format?: "iife" | "cjs" | "esm";
7 | minify?: boolean;
8 | inject?: string[];
9 | }
10 |
11 | /**
12 | * Creates a bundle() function that can be used by build targets
13 | * to package the SSR code together with some platform specific
14 | * adapter logic.
15 | */
16 | export function createBundler(ssrBundle: string) {
17 | const resolve: Plugin = {
18 | name: "capri-resolve",
19 | setup(build) {
20 | build.onResolve({ filter: /^virtual:capri-ssr$/ }, () => {
21 | return { path: ssrBundle };
22 | });
23 | },
24 | };
25 |
26 | return async function bundle(
27 | input: string,
28 | output: string,
29 | options: BundleOptions = {},
30 | ) {
31 | const {
32 | target = "es2020",
33 | format = "esm",
34 | platform = "neutral",
35 | minify = true,
36 | inject,
37 | } = options;
38 | await esbuild.build({
39 | target,
40 | format,
41 | platform,
42 | plugins: [resolve],
43 | entryPoints: [input],
44 | inject,
45 | outfile: output,
46 | allowOverwrite: true,
47 | legalComments: "none",
48 | bundle: true,
49 | minify,
50 | });
51 | };
52 | }
53 |
--------------------------------------------------------------------------------
/packages/capri/src/context.ts:
--------------------------------------------------------------------------------
1 | export type RenderContext = {
2 | status(code: number): void;
3 | getHeader(name: string): string | null | undefined;
4 | setHeader(name: string, value: string): void;
5 | };
6 |
7 | export class StaticRenderContext implements RenderContext {
8 | statusCode = 200;
9 | headers: Record = {};
10 | status(code: number) {
11 | this.statusCode = code;
12 | }
13 | getHeader(name: string) {
14 | return this.headers[name];
15 | }
16 | setHeader(name: string, value: string) {
17 | this.headers[name] = value;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/capri/src/dev.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import path from "path";
3 | import { ModuleGraph, ModuleNode, ViteDevServer } from "vite";
4 |
5 | import { RenderContext } from "./context.js";
6 | import { getEntryScripts } from "./entry.js";
7 | import { renderHtml } from "./render.js";
8 | import { direct } from "./utils.js";
9 |
10 | export async function renderPreview(
11 | server: ViteDevServer,
12 | url: string,
13 | context?: RenderContext,
14 | ) {
15 | // always read fresh template in dev
16 | const indexHtml = fs.readFileSync(
17 | path.resolve(server.config.root, "index.html"),
18 | "utf-8",
19 | );
20 |
21 | const entry = getEntryScripts(server.config.root);
22 |
23 | // Load the server entry. vite.ssrLoadModule automatically transforms
24 | // your ESM source code to be usable in Node.
25 | const renderFn = (await server.ssrLoadModule(entry.server)).render;
26 | const css = collectCss(server.moduleGraph);
27 | try {
28 | const html = await renderHtml(renderFn, url, indexHtml, css, context);
29 | if (html) {
30 | // Apply Vite HTML transforms. This injects the Vite HMR client, and
31 | // also applies HTML transforms from Vite plugins, e.g. global preambles
32 | // from @vitejs/plugin-react
33 | return await server.transformIndexHtml(url, html);
34 | }
35 | } catch (e: any) {
36 | server.ssrFixStacktrace(e);
37 | throw e;
38 | }
39 | }
40 |
41 | function collectCss(moduleGraph: ModuleGraph) {
42 | const css: string[] = [];
43 | moduleGraph.idToModuleMap.forEach((m) => {
44 | if (isStyleModule(m)) {
45 | const href = direct(m.url);
46 | if (!css.includes(href)) {
47 | css.push(href);
48 | }
49 | }
50 | });
51 | return css;
52 | }
53 |
54 | // Taken from https://github.com/vitejs/vite/blob/13ac37d/packages/vite/src/node/constants.ts#L49
55 | export const CSS_LANGS =
56 | /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
57 |
58 | function isStyleModule(mod: ModuleNode) {
59 | return !!(CSS_LANGS.test(mod.url) || mod.id?.match(/\?vue&type=style/));
60 | }
61 |
--------------------------------------------------------------------------------
/packages/capri/src/entry.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 |
3 | import * as fsutils from "./fsutils.js";
4 | import { getEntrySrc } from "./html.js";
5 |
6 | /**
7 | * Get the absolute path to index.html.
8 | * @param root the project root
9 | * @returns The absolute path
10 | * @throws Error, if file not found
11 | */
12 | export function getIndexHtml(root = "") {
13 | const indexHtml = path.resolve(root, "index.html");
14 | if (!fsutils.exists(indexHtml)) {
15 | throw new Error(`Can't find index.html in ${root}`);
16 | }
17 | return indexHtml;
18 | }
19 |
20 | /**
21 | * Get the absolute path to the entry script.
22 | * @param root the project root
23 | * @returns The absolute path
24 | * @throws Error, if file not found
25 | */
26 | export function getEntryScript(root = "") {
27 | const indexHtml = getIndexHtml(root);
28 | const src = getEntrySrc(fsutils.read(indexHtml));
29 | if (!src) throw new Error(`Can't find entry script in ${indexHtml}`);
30 | return src;
31 | }
32 |
33 | /**
34 | * Check if the given script is a .server script.
35 | */
36 | function isServerEntry(file: string) {
37 | return /\.server\.[^.]+$/.test(file);
38 | }
39 |
40 | export type EntryScripts = {
41 | raw: string;
42 | server: string;
43 | client?: string;
44 | };
45 |
46 | /**
47 | * Get the absolute paths to the entry scripts.
48 | * @param root the project root
49 | */
50 | export function getEntryScripts(root = ""): EntryScripts {
51 | const raw = getEntryScript(root);
52 | const resolved = path.join(path.resolve(root), raw);
53 | if (isServerEntry(raw)) {
54 | return { raw, server: resolved };
55 | }
56 | const server = resolved.replace(/(\.client)?(\.[^.]+)$/, ".server$2");
57 | if (!fsutils.exists(server)) {
58 | throw new Error(
59 | `File not found: ${server}. Make sure to name your server entry file accordingly.`,
60 | );
61 | }
62 | return {
63 | raw,
64 | client: resolved,
65 | server,
66 | };
67 | }
68 |
--------------------------------------------------------------------------------
/packages/capri/src/fsutils.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import path from "path";
3 |
4 | import { escapeRegex, posixify } from "./utils.js";
5 |
6 | /**
7 | * Check if a file or directory exists.
8 | * @returns true if the path exists, false otherwise.
9 | */
10 | export function exists(file: string) {
11 | return fs.existsSync(file);
12 | }
13 |
14 | /**
15 | * Creates a directory and all possibly missing ancestors.
16 | */
17 | export function mkdir(dir: string) {
18 | try {
19 | fs.mkdirSync(dir, { recursive: true });
20 | } catch (err: any) {
21 | if (err.code === "EEXIST") return;
22 | throw err;
23 | }
24 | }
25 |
26 | /**
27 | * Recursively deletes the given path.
28 | */
29 | export function rm(path: string) {
30 | fs.rmSync(path, { force: true, recursive: true });
31 | }
32 | /**
33 | * Copy files.
34 | * @param source file or directory to copy
35 | * @param target destination file name or directory
36 | * @param opts optional filter and replacement functions
37 | * @returns the files that were written
38 | */
39 | export function copy(
40 | source: string,
41 | target: string,
42 | opts: {
43 | filter?: (basename: string) => boolean;
44 | replace?: Record;
45 | } = {},
46 | ) {
47 | if (!exists(source)) return [];
48 |
49 | const files: string[] = [];
50 |
51 | const prefix = posixify(target) + "/";
52 |
53 | const regex = opts.replace
54 | ? new RegExp(
55 | `(${Object.keys(opts.replace).map(escapeRegex).join("|")})`,
56 | "g",
57 | )
58 | : null;
59 |
60 | function go(from: string, to: string) {
61 | if (opts.filter && !opts.filter(path.basename(from))) return;
62 |
63 | const stats = fs.statSync(from);
64 |
65 | if (stats.isDirectory()) {
66 | fs.readdirSync(from).forEach((file) => {
67 | go(path.join(from, file), path.join(to, file));
68 | });
69 | } else {
70 | mkdir(path.dirname(to));
71 |
72 | if (regex && opts.replace) {
73 | const data = read(from);
74 | fs.writeFileSync(
75 | to,
76 | data.replace(regex, (match, key) => opts.replace?.[key] ?? ""),
77 | );
78 | } else {
79 | fs.copyFileSync(from, to);
80 | }
81 |
82 | files.push(
83 | to === target
84 | ? posixify(path.basename(to))
85 | : posixify(to).replace(prefix, ""),
86 | );
87 | }
88 | }
89 |
90 | go(source, target);
91 |
92 | return files;
93 | }
94 |
95 | /**
96 | * Read the contents of a UTF-8 encoded file.
97 | */
98 | export function read(file: string) {
99 | return fs.readFileSync(file, "utf8");
100 | }
101 |
102 | /**
103 | * Write a string to a file. Missing directories are created.
104 | */
105 | export function write(file: string, data: string) {
106 | try {
107 | fs.mkdirSync(path.dirname(file), { recursive: true });
108 | } catch {
109 | // ignore
110 | }
111 | fs.writeFileSync(file, data);
112 | }
113 |
--------------------------------------------------------------------------------
/packages/capri/src/html.ts:
--------------------------------------------------------------------------------
1 | import * as cheerio from "cheerio";
2 |
3 | import { isLocalUrl, resolveUrl } from "./utils.js";
4 |
5 | export function getLinks(html: string) {
6 | const $ = cheerio.load(html);
7 | return $('a[href]:not([target]),a[href][target="self"]')
8 | .map((i, el) => $(el).attr("href"))
9 | .toArray()
10 | .filter(isLocalUrl)
11 | .map(resolveUrl);
12 | }
13 |
14 | export function getEntrySrc(html: string) {
15 | const $ = cheerio.load(html);
16 | const src = $('script[type="module"][src]')
17 | .map((i, el) => $(el).attr("src"))
18 | .toArray()
19 | .filter(isLocalUrl);
20 | return src[0];
21 | }
22 |
--------------------------------------------------------------------------------
/packages/capri/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./context.js";
2 | export * from "./dev.js";
3 | export * from "./entry.js";
4 | export * from "./prerender.js";
5 | export * from "./render.js";
6 | export * from "./types.js";
7 |
--------------------------------------------------------------------------------
/packages/capri/src/options.ts:
--------------------------------------------------------------------------------
1 | import type { ConfigEnv, SSROptions, UserConfig } from "vite";
2 |
3 | import type { BundleOptions } from "./bundle.js";
4 | import type * as fsutils from "./fsutils.js";
5 | import type { FollowLinksConfig, PrerenderConfig } from "./prerender.js";
6 | import type { Wrapper, WrapperInjectionHook } from "./wrapper.js";
7 |
8 | export interface Adapter {
9 | hydrate: string;
10 | island: Wrapper;
11 | lagoon: Wrapper;
12 | injectWrapper?: WrapperInjectionHook;
13 | }
14 |
15 | export interface BuildArgs {
16 | rootDir: string;
17 | outDir: string;
18 | ssrBundle: string;
19 | prerendered: string[];
20 | fsutils: typeof fsutils;
21 | bundle: (
22 | input: string,
23 | output: string,
24 | options?: BundleOptions,
25 | ) => Promise;
26 | }
27 |
28 | interface ViteConfig extends UserConfig {
29 | ssr?: SSROptions;
30 | }
31 |
32 | export interface BuildTarget {
33 | config?: (
34 | config: ViteConfig,
35 | env: ConfigEnv,
36 | ) => ViteConfig | null | void | Promise;
37 | build: (args: BuildArgs) => Promise;
38 | }
39 | export interface CapriPluginOptions {
40 | createIndexFiles?: boolean;
41 | prerender?: PrerenderConfig;
42 | followLinks?: FollowLinksConfig;
43 | islandGlobPattern?: string;
44 | lagoonGlobPattern?: string;
45 | adapter: Adapter;
46 | target?: BuildTarget | string;
47 | spa?: string | false;
48 | }
49 |
50 | export type CapriAdapterPluginOptions = Omit;
51 |
--------------------------------------------------------------------------------
/packages/capri/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Makes sure that the global fetch and ReadableStream APIs are available
3 | * and loads the polyfills if necessary.
4 | */
5 | export async function polyfillWebAPIs() {
6 | if (!globalThis.ReadableStream) {
7 | await import("web-streams-polyfill");
8 | }
9 |
10 | if (!globalThis.fetch) {
11 | const fetch: any = await import("node-fetch");
12 | globalThis.fetch = fetch.default;
13 | globalThis.Request = fetch.Request;
14 | globalThis.Response = fetch.Response;
15 | globalThis.Headers = fetch.Headers;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/capri/src/prerender.ts:
--------------------------------------------------------------------------------
1 | import * as fs from "fs";
2 | import * as path from "path";
3 | import urlJoin from "url-join";
4 |
5 | import { StaticRenderContext } from "./context.js";
6 | import { getLinks } from "./html.js";
7 | import { polyfillWebAPIs } from "./polyfills.js";
8 | import { loadSSRModule } from "./render.js";
9 | import { stripLeadingSlash, stripTrailingSlash } from "./utils.js";
10 |
11 | export type PrerenderConfig =
12 | | false
13 | | string
14 | | string[]
15 | | (() => string[] | Promise);
16 |
17 | export type FollowLinksConfig = boolean | ((pathname: string) => boolean);
18 |
19 | type StaticRenderConfig = {
20 | ssrBundle: string;
21 | createIndexFiles: boolean;
22 | outDir: string;
23 | base: string;
24 | prerender: PrerenderConfig;
25 | followLinks: FollowLinksConfig;
26 | };
27 |
28 | async function getStaticPaths(prerender: PrerenderConfig): Promise {
29 | if (prerender === false) return [];
30 | if (typeof prerender === "string") return [prerender];
31 | if (Array.isArray(prerender)) return prerender;
32 | return getStaticPaths(await prerender());
33 | }
34 |
35 | export async function renderStaticPages({
36 | ssrBundle,
37 | createIndexFiles,
38 | outDir,
39 | base,
40 | prerender,
41 | followLinks,
42 | }: StaticRenderConfig) {
43 | await polyfillWebAPIs();
44 | const ssr = await loadSSRModule(ssrBundle);
45 | const seen = new Set(
46 | (await getStaticPaths(prerender)).map((s) => urlJoin(base, s)),
47 | );
48 | const urls = [...seen];
49 | for (const url of urls) {
50 | const context = new StaticRenderContext();
51 | const html = await ssr(url, context);
52 | if (html && context.statusCode === 200) {
53 | const fileName = urlToFileName(url, createIndexFiles, base);
54 | const dest = path.join(outDir, fileName);
55 | fs.mkdirSync(path.dirname(dest), { recursive: true });
56 | fs.writeFileSync(dest, html);
57 |
58 | if (followLinks) {
59 | const follow =
60 | typeof followLinks === "function" ? followLinks : Boolean;
61 | const links = getLinks(html).filter(follow);
62 | for (const link of links) {
63 | if (!seen.has(link)) {
64 | seen.add(link);
65 | urls.push(link);
66 | }
67 | }
68 | }
69 | } else {
70 | console.warn("Skipping", url, "- status", context.statusCode);
71 | }
72 | }
73 | return urls;
74 | }
75 |
76 | export function urlToFileName(url: string, extraDir: boolean, base: string) {
77 | let file = stripTrailingSlash(url);
78 | base = stripTrailingSlash(base);
79 | if (base && file.startsWith(base)) file = file.slice(base.length);
80 | file = stripLeadingSlash(file);
81 | if (!file) return "index.html";
82 | if (file.includes(".html")) return file;
83 | return `${file}${extraDir ? "/index.html" : ".html"}`;
84 | }
85 |
--------------------------------------------------------------------------------
/packages/capri/src/render.ts:
--------------------------------------------------------------------------------
1 | import { RenderContext, StaticRenderContext } from "./context.js";
2 | import { Template } from "./Template.js";
3 | import { Markup, RenderFunction } from "./types.js";
4 | import { SSRFunction } from "./virtual/ssr.js";
5 |
6 | export async function loadSSRModule(path: string) {
7 | if (path.startsWith(".")) {
8 | throw new Error("Path must be absolute");
9 | }
10 |
11 | const mod = await import(/* @vite-ignore */ path);
12 |
13 | if (mod && typeof mod === "object" && "default" in mod) {
14 | const ssr = mod.default;
15 | // When ssr.format is set to "cjs" we end up with default.default:
16 | const fn = ssr.default ?? ssr;
17 | if (typeof fn === "function") return fn as SSRFunction;
18 | }
19 | throw new Error(`${path} is not a SSR module`);
20 | }
21 |
22 | /**
23 | * Renders a page and returns a template which can be used to insert additional
24 | * markup.
25 | *
26 | * @param renderFn The render function
27 | * @param url The URL of the page to render
28 | * @param indexHtml The index.html where to insert the markup
29 | * @param css List of stylesheets to include
30 | * @param context The context passed to the render function
31 | * @returns A HTML string or undefined, if nothing was rendered.
32 | */
33 | export async function renderHtml(
34 | renderFn: RenderFunction,
35 | url: string,
36 | indexHtml: string,
37 | css: string[],
38 | context: RenderContext = new StaticRenderContext(),
39 | ) {
40 | const result = await renderFn(url, context);
41 | if (!result) return;
42 |
43 | const template = new Template(indexHtml);
44 |
45 | // Insert the rendered markup into the index.html template:
46 | template.insertMarkup(await resolveMarkup(result));
47 |
48 | const head = css
49 | .map((href) => ` = {};
72 | for (const [key, value] of Object.entries(markup)) {
73 | resolved[key] = await value;
74 | }
75 | return resolved;
76 | }
77 |
--------------------------------------------------------------------------------
/packages/capri/src/types.ts:
--------------------------------------------------------------------------------
1 | import { RenderContext } from "./context.js";
2 |
3 | export type Markup = Record>;
4 | export type RenderResult = Markup | null | undefined;
5 |
6 | export type RenderFunction = (
7 | url: string,
8 | context: RenderContext,
9 | ) => RenderResult | Promise;
10 |
11 | export interface IslandOptions {
12 | media?: string;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/capri/src/utils.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 |
3 | export function escapeRegex(str: string) {
4 | return str.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
5 | }
6 |
7 | export function posixify(str: string) {
8 | return str.split(path.sep).join(path.posix.sep);
9 | }
10 |
11 | export function isLocalUrl(href: string) {
12 | const url = new URL(href, "file:///");
13 | return url.protocol === "file:" && !url.host;
14 | }
15 |
16 | export function resolveUrl(href: string) {
17 | const url = new URL(href, "file:///");
18 | return url.pathname;
19 | }
20 |
21 | export function stripLeadingSlash(s: string) {
22 | return s.replace(/^\//, "");
23 | }
24 |
25 | export function stripTrailingSlash(s: string) {
26 | return s.replace(/\/$/, "");
27 | }
28 |
29 | export function direct(s: string) {
30 | const i = s.indexOf("?");
31 | if (i === -1) return s + "?direct";
32 | if (s.slice(i).match(/[?&]direct\b/)) return s;
33 | return s.replace("?", "?direct&");
34 | }
35 |
36 | export function addUnwrapped(s: string) {
37 | // Note: we add the basename so that the extension stays the same...
38 | return `${s}?unwrapped=${path.basename(s)}`;
39 | }
40 |
--------------------------------------------------------------------------------
/packages/capri/src/virtual/client.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * When running inside a Vite dev server and the project has a server-only
3 | * entry file, this module will be used as client-entry.
4 | */
5 | import "virtual:capri-hydration";
6 |
--------------------------------------------------------------------------------
/packages/capri/src/virtual/hydration.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Entry script to hydrate all the islands.
3 | */
4 |
5 | // Find all modules that match the island glob pattern.
6 | // NOTE: The ISLAND_GLOB_PATTERN token below is replaced by the
7 | // actual pattern during the build.
8 | const modules = import.meta.glob("%ISLAND_GLOB_PATTERN%");
9 |
10 | // Find all island marker scripts
11 | const islands = document.querySelectorAll("script[data-island]");
12 |
13 | islands.forEach((node) => {
14 | // The element to be hydrated
15 | const element = node.previousElementSibling;
16 | if (!element) throw new Error("Missing previousElementSibling");
17 |
18 | // The island source code to load
19 | const island = node.getAttribute("data-island");
20 | if (!island) throw new Error("Missing attribute: data-island");
21 |
22 | const load = modules[island];
23 | if (!load) throw new Error(`Island module not found: ${island}`);
24 |
25 | // Island props and options read from the marker script
26 | const { props = {}, options = {} } = node.textContent
27 | ? JSON.parse(node.textContent)
28 | : {};
29 |
30 | const hydrateComponent = async () => {
31 | const hydrate = (await import("virtual:capri-hydration-adapter")).default;
32 | const m: any = await load();
33 | hydrate(m.default, props, element);
34 | };
35 |
36 | const { media } = options;
37 | if (media && "matchMedia" in window) {
38 | const mql = matchMedia(media);
39 | if (mql.matches) {
40 | hydrateComponent();
41 | } else {
42 | mql.addEventListener("change", hydrateComponent, { once: true });
43 | }
44 | } else {
45 | hydrateComponent();
46 | }
47 | });
48 |
--------------------------------------------------------------------------------
/packages/capri/src/virtual/ssr.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Virtual module that inlines the index.html upon build.
3 | */
4 | import * as renderModule from "virtual:capri-server-entry";
5 |
6 | import { RenderContext } from "../context.js";
7 | import { renderHtml } from "../render.js";
8 |
9 | const render: any = renderModule;
10 | const renderFn = render.render ?? render.default;
11 |
12 | const template = "%TEMPLATE%";
13 |
14 | const css: string[] = __CSS_ASSETS__;
15 |
16 | export default async function ssr(url: string, context: RenderContext) {
17 | return renderHtml(renderFn, url, template, css, context);
18 | }
19 |
20 | export type SSRFunction = typeof ssr;
21 |
--------------------------------------------------------------------------------
/packages/capri/src/virtual/virtual.d.ts:
--------------------------------------------------------------------------------
1 | declare module "virtual:capri-hydration-adapter" {
2 | export default (
3 | component: any,
4 | props: Record,
5 | element: Element,
6 | ) => any;
7 | }
8 |
9 | declare module "virtual:capri-server-entry" {}
10 |
--------------------------------------------------------------------------------
/packages/capri/src/vite.d.ts:
--------------------------------------------------------------------------------
1 | import { ChunkMetadata } from "vite";
2 |
3 | // Vite extends rollup's RenderedChunk interface but does not export its
4 | // declaration so we have to repeat it here:
5 |
6 | declare module "rollup" {
7 | export interface RenderedChunk {
8 | viteMetadata: ChunkMetadata;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/capri/ssr.d.ts:
--------------------------------------------------------------------------------
1 | declare module "virtual:capri-ssr" {
2 | const { default: ssr } = await import("./src/virtual/ssr.js");
3 | export default ssr;
4 | }
5 |
6 | declare const __CSS_ASSETS__: string[];
7 |
--------------------------------------------------------------------------------
/packages/capri/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src",
6 | "types": ["vite/client"],
7 | "isolatedModules": false
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/cloudflare/README.md:
--------------------------------------------------------------------------------
1 | # Capri 🍋 SSR on Cloudflare Pages
2 |
3 | ## Usage
4 |
5 | ```ts
6 | // vite.config.ts
7 | import { defineConfig } from "vite";
8 | import react from "@vitejs/plugin-react";
9 | import capri from "@capri-js/react";
10 | import cloudflare from "@capri-js/cloudflare";
11 |
12 | export default defineConfig({
13 | plugins: [
14 | react(),
15 | capri({
16 | target: cloudflare({
17 | // options (see below)
18 | }),
19 | }),
20 | ],
21 | });
22 | ```
23 |
24 | ## Options
25 |
26 | The output can be configured using the following options:
27 |
28 | ### `webStreamsPolyfill`
29 |
30 | Some libraries like `react-dom/server` require
31 | the `streams_enable_constructors` feature flag to be enabled. As a workaround, you can set this option to `true`.
32 |
33 | ### `type` - What kind of function to create
34 |
35 | - When set to `"worker"`, Capri will generate a
36 | `_worker.js` file at the root of your output directory. In this case, Cloudflare will ignore any custom functions present in `/functions`.
37 |
38 | - When set to `"middleware`, Capri will generate a
39 | `/functions/_middleware.js` file instead. This allows
40 | you to use your own custom functions in addition to Capri.
41 |
42 | - When set to `"auto"` (default), Capri will generate a worker unless a `/functions` directory is present, in which
43 | case a middleware will be generated instead.
44 |
--------------------------------------------------------------------------------
/packages/cloudflare/files/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 404
6 |
41 |
Error 404
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/packages/cloudflare/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@capri-js/cloudflare",
3 | "version": "1.2.3",
4 | "description": "",
5 | "author": "Felix Gnass ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/cloudflare"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "./lib/index.js",
14 | "files": [
15 | "lib",
16 | "files"
17 | ],
18 | "dependencies": {
19 | "capri": "^5.2.3",
20 | "web-streams-polyfill": "^3.2.1"
21 | },
22 | "devDependencies": {
23 | "@cloudflare/workers-types": "^4.20231218.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/cloudflare/src/index.ts:
--------------------------------------------------------------------------------
1 | import { BuildTarget } from "capri/vite-plugin";
2 | import * as path from "path";
3 |
4 | type CloudflareOptions = {
5 | type?: "middleware" | "worker" | "auto";
6 | webStreamsPolyfill?: boolean;
7 | };
8 |
9 | export default function cloudflare({
10 | type = "auto",
11 | webStreamsPolyfill = false,
12 | }: CloudflareOptions = {}): BuildTarget {
13 | return {
14 | config() {
15 | return {
16 | ssr: {
17 | target: "webworker",
18 | noExternal: true,
19 | },
20 | };
21 | },
22 | async build({ rootDir, outDir, bundle, fsutils }) {
23 | const dirName = path.dirname(new URL(import.meta.url).pathname);
24 | const funcDir = path.resolve(rootDir, "functions");
25 | const worker = path.resolve(outDir, "_worker.js");
26 | const hasFunctions = fsutils.exists(funcDir);
27 |
28 | // Cloudflare ignores all functions if a _worker.js file is present
29 | if (hasFunctions && type === "worker") {
30 | console.warn(
31 | "Warning: The project contains a functions directory but type is set to 'worker'.",
32 | );
33 | }
34 |
35 | const useWorker = type === "worker" || (type === "auto" && !hasFunctions);
36 |
37 | // Make sure no old _worker.js file is in the way
38 | if (!useWorker && fsutils.exists(worker)) {
39 | console.info("Removing old _worker.js file");
40 | fsutils.rm(worker);
41 | }
42 |
43 | // Cloudflare treats projects without a 404 page as SPA.
44 | // To enable MPA mode we add a basic error page if no custom one exists.
45 | const notFound = path.resolve(outDir, "404.html");
46 | if (!fsutils.exists(notFound)) {
47 | fsutils.copy(
48 | path.resolve(dirName, "..", "files", "404.html"),
49 | notFound,
50 | );
51 | }
52 |
53 | let inject: string[] | undefined;
54 | if (webStreamsPolyfill) {
55 | inject = [path.resolve(dirName, "polyfill.js")];
56 | }
57 |
58 | if (useWorker) {
59 | // Create the worker
60 | await bundle(
61 | path.resolve(dirName, "worker.js"),
62 | path.resolve(outDir, "_worker.js"),
63 | {
64 | inject,
65 | platform: "browser",
66 | },
67 | );
68 | } else {
69 | // Create the middleware
70 | await bundle(
71 | path.resolve(dirName, "middleware.js"),
72 | path.resolve(funcDir, "_middleware.js"),
73 | {
74 | inject,
75 | target: "es2017",
76 | platform: "browser",
77 | },
78 | );
79 | }
80 | },
81 | };
82 | }
83 |
--------------------------------------------------------------------------------
/packages/cloudflare/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import ssr from "virtual:capri-ssr";
2 |
3 | const handler: PagesFunction = async ({ request, next }) => {
4 | // Handle the request as usual...
5 | const response = await next();
6 | if (
7 | response.status === 404 &&
8 | request.headers.get("accept")?.includes("text/html")
9 | ) {
10 | // No static asset was found and the browser accepts html.
11 | // Try to render the requested page...
12 | const path = new URL(request.url).pathname;
13 |
14 | let status = 200;
15 | const headers = new Headers({
16 | "Content-Type": "text/html; charset=utf-8",
17 | });
18 |
19 | const html = await ssr(path, {
20 | status: (code) => {
21 | status = code;
22 | },
23 | getHeader: request.headers.get.bind(request.headers),
24 | setHeader: headers.set.bind(headers),
25 | });
26 | if (html) {
27 | return new Response(html, { status, headers });
28 | }
29 | }
30 | return response;
31 | };
32 |
33 | export const onRequest = [handler];
34 |
--------------------------------------------------------------------------------
/packages/cloudflare/src/polyfill.ts:
--------------------------------------------------------------------------------
1 | import "web-streams-polyfill/es6";
2 |
--------------------------------------------------------------------------------
/packages/cloudflare/src/worker.ts:
--------------------------------------------------------------------------------
1 | import ssr from "virtual:capri-ssr";
2 |
3 | type Env = EventContext["env"];
4 | const handler: ExportedHandler = {
5 | async fetch(request, env) {
6 | const response = await env.ASSETS.fetch(request);
7 | if (
8 | response.status === 404 &&
9 | request.headers.get("accept")?.includes("text/html")
10 | ) {
11 | const path = new URL(request.url).pathname;
12 |
13 | let status = 200;
14 | const headers = new Headers({
15 | "Content-Type": "text/html; charset=utf-8",
16 | });
17 |
18 | const html = await ssr(path, {
19 | status: (code) => {
20 | status = code;
21 | },
22 | getHeader: request.headers.get.bind(request.headers),
23 | setHeader: headers.set.bind(headers),
24 | });
25 | if (html) {
26 | return new Response(html, { status, headers });
27 | }
28 | }
29 | return response;
30 | },
31 | };
32 |
33 | export default handler;
34 |
--------------------------------------------------------------------------------
/packages/cloudflare/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src",
6 | "types": ["capri/ssr", "@cloudflare/workers-types"]
7 | },
8 | "references": [{ "path": "../capri" }]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/create/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | tsconfig.json
3 | tsconfig.tsbuildinfo
--------------------------------------------------------------------------------
/packages/create/README.md:
--------------------------------------------------------------------------------
1 | # Create Capri 🌱
2 |
3 | The easiest way to get started with Capri is by using `@capri-js/create`. This CLI tool enables you to quickly start building a new Capri site, with everything set up for you. You can create a new site using the default template, or by using one of the [official examples](https://github.com/capri-js/capri/tree/main/examples). To get started, use the following command:
4 |
5 | ```bash
6 | npm init capri
7 | # or
8 | yarn create capri
9 | ```
10 |
11 | To create a new project in a specific folder, you can pass a name as argument
12 |
13 | ```bash
14 | npm init capri -- my-capri-site
15 | # or
16 | yarn create capri my-capri-site
17 | ```
18 |
19 | ## Options
20 |
21 | `create-capri` comes with the following options:
22 |
23 | - **-e, --example [name]|[github-url]** - An example to bootstrap the project with. You can use an example name from the [Capri repo](https://github.com/capri-js/capri/tree/main/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
24 | - **--example-path <path-to-example>** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
25 |
26 | ## Credits
27 |
28 | Thanks to [Vercel](https://vercel.com/) for [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) which was used as basis for `create-capri`.
29 |
--------------------------------------------------------------------------------
/packages/create/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-capri",
3 | "version": "2.2.0",
4 | "description": "Create Capri projects with a single command",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/capri-js/capri",
8 | "directory": "packages/create"
9 | },
10 | "bin": {
11 | "create-capri": "./lib/index.js"
12 | },
13 | "type": "module",
14 | "dependencies": {
15 | "async-retry": "1.3.3",
16 | "chalk": "^5.3.0",
17 | "commander": "^11.1.0",
18 | "cpy": "^11.0.0",
19 | "cross-spawn": "7.0.3",
20 | "got": "^12.1.0",
21 | "prompts": "2.4.2",
22 | "rimraf": "^5.0.5",
23 | "tar": "^6.2.0",
24 | "validate-npm-package-name": "^5.0.0"
25 | },
26 | "devDependencies": {
27 | "@types/async-retry": "^1.4.8",
28 | "@types/cross-spawn": "^6.0.6",
29 | "@types/node": "^20.10.6",
30 | "@types/prompts": "^2.4.9",
31 | "@types/tar": "^6.1.10",
32 | "@types/validate-npm-package-name": "^4.0.2"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/examples.ts:
--------------------------------------------------------------------------------
1 | import got from "got";
2 | import { Stream } from "stream";
3 | import tar from "tar";
4 | import { promisify } from "util";
5 |
6 | const pipeline = promisify(Stream.pipeline);
7 |
8 | export type RepoInfo = {
9 | username: string;
10 | name: string;
11 | branch: string;
12 | filePath: string;
13 | };
14 |
15 | export async function isUrlOk(url: string): Promise {
16 | const res = await got.head(url).catch((e) => e);
17 | return res.statusCode === 200;
18 | }
19 |
20 | export async function getRepoInfo(
21 | url: URL,
22 | examplePath?: string,
23 | ): Promise {
24 | const [, username, name, t, _branch, ...file] = url.pathname.split("/");
25 | const filePath = examplePath
26 | ? examplePath.replace(/^\//, "")
27 | : file.join("/");
28 |
29 | // Support repos whose entire purpose is to be a Capri example, e.g.
30 | // https://github.com/:username/:my-example.
31 | if (t === undefined) {
32 | const infoResponse = await got(
33 | `https://api.github.com/repos/${username}/${name}`,
34 | ).catch((e) => e);
35 | if (infoResponse.statusCode !== 200) {
36 | return;
37 | }
38 | const info = JSON.parse(infoResponse.body);
39 | return { username, name, branch: info["default_branch"], filePath };
40 | }
41 |
42 | // If examplePath is available, the branch name takes the entire path
43 | const branch = examplePath
44 | ? `${_branch}/${file.join("/")}`.replace(new RegExp(`/${filePath}|/$`), "")
45 | : _branch;
46 |
47 | if (username && name && branch && t === "tree") {
48 | return { username, name, branch, filePath };
49 | }
50 | }
51 |
52 | export function hasRepo({
53 | username,
54 | name,
55 | branch,
56 | filePath,
57 | }: RepoInfo): Promise {
58 | const contentsUrl = `https://api.github.com/repos/${username}/${name}/contents`;
59 | const packagePath = `${filePath ? `/${filePath}` : ""}/package.json`;
60 |
61 | return isUrlOk(contentsUrl + packagePath + `?ref=${branch}`);
62 | }
63 |
64 | export function hasExample(name: string): Promise {
65 | return isUrlOk(
66 | `https://api.github.com/repos/capri-js/capri/contents/examples/${encodeURIComponent(
67 | name,
68 | )}/package.json`,
69 | );
70 | }
71 |
72 | export function downloadAndExtractRepo(
73 | root: string,
74 | { username, name, branch, filePath }: RepoInfo,
75 | ): Promise {
76 | return pipeline(
77 | got.stream(
78 | `https://codeload.github.com/${username}/${name}/tar.gz/${branch}`,
79 | ),
80 | tar.extract(
81 | { cwd: root, strip: filePath ? filePath.split("/").length + 1 : 1 },
82 | [`${name}-${branch}${filePath ? `/${filePath}` : ""}`],
83 | ),
84 | );
85 | }
86 |
87 | export function downloadAndExtractExample(
88 | root: string,
89 | name: string,
90 | ): Promise {
91 | return pipeline(
92 | got.stream("https://codeload.github.com/capri-js/capri/tar.gz/main"),
93 | tar.extract({ cwd: root, strip: 3 }, [`capri-main/examples/${name}`]),
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/get-pkg-manager.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from "child_process";
2 |
3 | export type PackageManager = "npm" | "pnpm" | "yarn";
4 |
5 | export function getPkgManager(): PackageManager {
6 | try {
7 | const userAgent = process.env.npm_config_user_agent;
8 | if (userAgent) {
9 | if (userAgent.startsWith("yarn")) {
10 | return "yarn";
11 | } else if (userAgent.startsWith("pnpm")) {
12 | return "pnpm";
13 | }
14 | }
15 | try {
16 | execSync("yarn --version", { stdio: "ignore" });
17 | return "yarn";
18 | } catch {
19 | execSync("pnpm --version", { stdio: "ignore" });
20 | return "pnpm";
21 | }
22 | } catch {
23 | return "npm";
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/git.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from "child_process";
2 | import path from "path";
3 | import { rimraf } from "rimraf";
4 |
5 | function isInGitRepository() {
6 | try {
7 | execSync("git rev-parse --is-inside-work-tree", { stdio: "ignore" });
8 | return true;
9 | } catch (_) {
10 | // ignore
11 | }
12 | return false;
13 | }
14 |
15 | function isInMercurialRepository() {
16 | try {
17 | execSync("hg --cwd . root", { stdio: "ignore" });
18 | return true;
19 | } catch (_) {
20 | // ignore
21 | }
22 | return false;
23 | }
24 |
25 | export function tryGitInit(root: string) {
26 | let didInit = false;
27 | try {
28 | execSync("git --version", { stdio: "ignore" });
29 | if (isInGitRepository() || isInMercurialRepository()) {
30 | return false;
31 | }
32 |
33 | execSync("git init", { stdio: "ignore" });
34 | didInit = true;
35 |
36 | execSync("git checkout -b main", { stdio: "ignore" });
37 |
38 | execSync("git add -A", { stdio: "ignore" });
39 | execSync('git commit -m "initial commit"', {
40 | stdio: "ignore",
41 | });
42 | return true;
43 | } catch (e) {
44 | if (didInit) {
45 | try {
46 | rimraf.sync(path.join(root, ".git"));
47 | } catch (_) {
48 | // ignore
49 | }
50 | }
51 | return false;
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/is-folder-empty.ts:
--------------------------------------------------------------------------------
1 | import chalk from "chalk";
2 | import fs from "fs";
3 | import path from "path";
4 |
5 | export function isFolderEmpty(root: string, name: string) {
6 | const validFiles = [
7 | ".DS_Store",
8 | ".git",
9 | ".gitattributes",
10 | ".gitignore",
11 | ".gitlab-ci.yml",
12 | ".hg",
13 | ".hgcheck",
14 | ".hgignore",
15 | ".idea",
16 | ".npmignore",
17 | ".travis.yml",
18 | "LICENSE",
19 | "Thumbs.db",
20 | "docs",
21 | "mkdocs.yml",
22 | "npm-debug.log",
23 | "yarn-debug.log",
24 | "yarn-error.log",
25 | ];
26 |
27 | const conflicts = fs
28 | .readdirSync(root)
29 | .filter((file) => !validFiles.includes(file))
30 | // Support IntelliJ IDEA-based editors
31 | .filter((file) => !/\.iml$/.test(file));
32 |
33 | if (conflicts.length > 0) {
34 | console.log(
35 | `The directory ${chalk.green(name)} contains files that could conflict:`,
36 | );
37 | console.log();
38 | for (const file of conflicts) {
39 | try {
40 | const stats = fs.lstatSync(path.join(root, file));
41 | if (stats.isDirectory()) {
42 | console.log(` ${chalk.blue(file)}/`);
43 | } else {
44 | console.log(` ${file}`);
45 | }
46 | } catch {
47 | console.log(` ${file}`);
48 | }
49 | }
50 | console.log();
51 | console.log(
52 | "Either try using a new directory name, or remove the files listed above.",
53 | );
54 | console.log();
55 | return false;
56 | }
57 |
58 | return true;
59 | }
60 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/is-online.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from "child_process";
2 | import dns from "dns";
3 | import url from "url";
4 |
5 | function getProxy() {
6 | if (process.env.https_proxy) {
7 | return process.env.https_proxy;
8 | }
9 |
10 | try {
11 | const httpsProxy = execSync("npm config get https-proxy").toString().trim();
12 | return httpsProxy !== "null" ? httpsProxy : undefined;
13 | } catch (e) {
14 | return;
15 | }
16 | }
17 |
18 | export function getOnline() {
19 | return new Promise((resolve) => {
20 | dns.lookup("registry.yarnpkg.com", (registryErr) => {
21 | if (!registryErr) {
22 | return resolve(true);
23 | }
24 |
25 | const proxy = getProxy();
26 | if (!proxy) {
27 | return resolve(false);
28 | }
29 |
30 | const { hostname } = url.parse(proxy);
31 | if (!hostname) {
32 | return resolve(false);
33 | }
34 |
35 | dns.lookup(hostname, (proxyErr) => {
36 | resolve(proxyErr == null);
37 | });
38 | });
39 | });
40 | }
41 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/is-writeable.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 |
3 | export async function isWriteable(directory: string) {
4 | try {
5 | await fs.promises.access(directory, (fs.constants ?? (fs as any)).W_OK);
6 | return true;
7 | } catch (err) {
8 | return false;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/make-dir.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 |
3 | export async function makeDir(root: string, options = { recursive: true }) {
4 | await fs.promises.mkdir(root, options);
5 | }
6 |
--------------------------------------------------------------------------------
/packages/create/src/helpers/validate-pkg.ts:
--------------------------------------------------------------------------------
1 | import validateProjectName from "validate-npm-package-name";
2 |
3 | export function validateNpmName(name: string): {
4 | valid: boolean;
5 | problems?: string[];
6 | } {
7 | const nameValidation = validateProjectName(name);
8 | if (nameValidation.validForNewPackages) {
9 | return { valid: true };
10 | }
11 |
12 | return {
13 | valid: false,
14 | problems: [
15 | ...(nameValidation.errors || []),
16 | ...(nameValidation.warnings || []),
17 | ],
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/packages/create/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/preact/README.md:
--------------------------------------------------------------------------------
1 | # Preact bindings for Capri 🍋
2 |
3 | ## Usage
4 |
5 | ```ts
6 | // vite.config.ts
7 | import { defineConfig } from "vite";
8 | import preact from "@preact/preset-vite";
9 | import capri from "@capri-js/preact";
10 |
11 | export default defineConfig({
12 | plugins: [preact(), capri()],
13 | });
14 | ```
15 |
16 | Visit [capri.build](https://capri.build) for docs and more information.
17 |
--------------------------------------------------------------------------------
/packages/preact/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@capri-js/preact",
3 | "version": "5.1.5",
4 | "description": "",
5 | "author": "Felix Gnass ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/preact"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "./lib/index.js",
14 | "files": [
15 | "lib"
16 | ],
17 | "exports": {
18 | ".": {
19 | "default": "./lib/index.js"
20 | },
21 | "./server": {
22 | "default": "./lib/server.js"
23 | }
24 | },
25 | "typesVersions": {
26 | "*": {
27 | "index.d.ts": [
28 | "lib/index.d.ts"
29 | ],
30 | "server": [
31 | "lib/server.d.ts"
32 | ]
33 | }
34 | },
35 | "dependencies": {
36 | "capri": "^5.2.3",
37 | "preact-iso": "^2.3.2",
38 | "preact-render-to-string": "^6.3.1"
39 | },
40 | "peerDependencies": {
41 | "preact": "^10.19.3",
42 | "vite": "3.x || 4.x"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/preact/src/capri.d.ts:
--------------------------------------------------------------------------------
1 | declare module "virtual:capri-component" {
2 | import { IslandOptions } from "capri";
3 | import { ComponentType } from "preact";
4 |
5 | const value: ComponentType;
6 | export default value;
7 |
8 | export const options: IslandOptions;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/preact/src/hydrate.ts:
--------------------------------------------------------------------------------
1 | import { ComponentType, h, hydrate as hydrateComponent } from "preact";
2 |
3 | export default function hydrate(
4 | component: ComponentType,
5 | props: Record,
6 | element: Element,
7 | ) {
8 | const children = element.querySelector("capri-children");
9 | if (children) {
10 | props.children = h("capri-children", {
11 | style: { display: "contents" },
12 | dangerouslySetInnerHTML: { __html: "" },
13 | });
14 | }
15 | return hydrateComponent(h(component, props), element.parentElement!);
16 | }
17 |
--------------------------------------------------------------------------------
/packages/preact/src/index.ts:
--------------------------------------------------------------------------------
1 | import { capri, CapriAdapterPluginOptions } from "capri/vite-plugin";
2 |
3 | export default function (opts: CapriAdapterPluginOptions = {}) {
4 | const resolve = (f: string) => new URL(f, import.meta.url).pathname;
5 | return capri({
6 | ...opts,
7 | adapter: {
8 | hydrate: resolve("./hydrate.js"),
9 | island: {
10 | server: resolve("./island.server.jsx"),
11 | },
12 | lagoon: {
13 | server: resolve("./lagoon.server.jsx"),
14 | client: resolve("./lagoon.client.jsx"),
15 | },
16 | },
17 | });
18 | }
19 |
--------------------------------------------------------------------------------
/packages/preact/src/island.server.jsx:
--------------------------------------------------------------------------------
1 | import * as componentModule from "virtual:capri-component";
2 |
3 | const { default: Component, options } = componentModule;
4 |
5 | function Island({ children, ...props }) {
6 | const wrappedChildren = children && (
7 | {children}
8 | );
9 |
10 | const scriptContent = JSON.stringify({ props, options });
11 | return (
12 |
13 | {wrappedChildren}
14 |
19 |
20 | );
21 | }
22 |
23 | export default Island;
24 |
--------------------------------------------------------------------------------
/packages/preact/src/lagoon.client.jsx:
--------------------------------------------------------------------------------
1 | export default function () {
2 | return (
3 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/packages/preact/src/server.ts:
--------------------------------------------------------------------------------
1 | export type { RenderFunction } from "capri";
2 | import { VNode } from "preact";
3 | import { prerender } from "preact-iso";
4 |
5 | export async function renderToString(vnode: VNode) {
6 | const res = await prerender(vnode, { maxDepth: 1000 });
7 | return res.html;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/preact/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | },
7 | "references": [{ "path": "../capri" }]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react-render-to-string/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | tsconfig.json
3 | tsconfig.tsbuildinfo
--------------------------------------------------------------------------------
/packages/react-render-to-string/README.md:
--------------------------------------------------------------------------------
1 | # react-render-to-string
2 |
3 | Like [`renderToStaticMarkup`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) but with **suspense support**.
4 |
5 | The module is intended to be used with static site generators that support data fetching inside components rather than upfront.
6 |
7 | It internally uses [renderToReadableStream](https://reactjs.org/docs/react-dom-server.html#rendertoreadablestream) and captures the result as string.
8 |
9 | ## Node.js vs. other runtimes
10 |
11 | The package exports two different implementations, one for modern environments that support [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), and one that uses [renderToPipeableStream](https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream) instead.
12 |
13 | **Note:** Node.js supports Web Streams since v.16.5.0, but the exports map of `react-dom/server` specifies a special build for `"node"` that does not include `renderToReadableStream`. Therefore, this package does the same and falls back to `renderToPipeableStream`.
14 |
15 | ## Usage
16 |
17 | ```js
18 | import renderToString from "react-render-to-string";
19 | import { App } from "./App";
20 |
21 | const html = await renderToString(",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/react-render-to-string"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "lib/index.js",
14 | "types": "lib/index.d.ts",
15 | "exports": {
16 | ".": {
17 | "node": "./lib/node.js",
18 | "default": "./lib/index.js"
19 | }
20 | },
21 | "devDependencies": {
22 | "@types/node": "^20.10.6",
23 | "@types/react-dom": "^18.2.18"
24 | },
25 | "peerDependencies": {
26 | "react-dom": "^18.0.0"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/react-render-to-string/src/index.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { renderToReadableStream } from "react-dom/server";
3 |
4 | export default async function renderToString(children: ReactNode) {
5 | const stream = await renderToReadableStream(children);
6 | await stream.allReady;
7 | return readableStreamToString(stream);
8 | }
9 |
10 | async function readableStreamToString(readableStream: ReadableStream) {
11 | const reader = readableStream.getReader();
12 | const decoder = new TextDecoder();
13 | try {
14 | let result = "";
15 | // eslint-disable-next-line no-constant-condition
16 | while (true) {
17 | const { done, value } = await reader.read();
18 | if (done) {
19 | return result;
20 | }
21 | result += decoder.decode(value, { stream: true });
22 | }
23 | } finally {
24 | reader.releaseLock();
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/react-render-to-string/src/node.ts:
--------------------------------------------------------------------------------
1 | import { EventEmitter } from "events";
2 | import { ReactNode } from "react";
3 | import { renderToPipeableStream } from "react-dom/server";
4 |
5 | export default function renderToString(element: ReactNode) {
6 | return new Promise((resolve, reject) => {
7 | const stream = renderToPipeableStream(element, {
8 | onError(err) {
9 | reject(err);
10 | },
11 | onAllReady() {
12 | stream.pipe(
13 | new StreamReader((html) => {
14 | resolve(stripComments(html));
15 | }),
16 | );
17 | },
18 | });
19 | });
20 | }
21 |
22 | function stripComments(html: string) {
23 | return html.replace(/)/g, "");
24 | }
25 |
26 | /**
27 | * Naive WriteableStream implementation that captures chunks in memory
28 | * ands invokes a callback with the concatenated result as utf8 string
29 | * once the end of the stream is signaled.
30 | */
31 | export class StreamReader
32 | extends EventEmitter
33 | implements NodeJS.WritableStream
34 | {
35 | writable = true;
36 | private chunks: Buffer[] = [];
37 | constructor(private cb: (s: string) => void) {
38 | super();
39 | }
40 | write(chunk: Uint8Array | string) {
41 | this.chunks.push(Buffer.from(chunk));
42 | return true;
43 | }
44 | end() {
45 | this.cb(Buffer.concat(this.chunks).toString("utf8"));
46 | return this;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/packages/react-render-to-string/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/README.md:
--------------------------------------------------------------------------------
1 | # React bindings for Capri 🍋
2 |
3 | ## Usage
4 |
5 | ```ts
6 | // vite.config.ts
7 | import { defineConfig } from "vite";
8 | import react from "@vitejs/plugin-react";
9 | import capri from "@capri-js/react";
10 |
11 | export default defineConfig({
12 | plugins: [react(), capri()],
13 | });
14 | ```
15 |
16 | Visit [capri.build](https://capri.build) for docs and more information.
17 |
--------------------------------------------------------------------------------
/packages/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@capri-js/react",
3 | "version": "5.2.3",
4 | "description": "",
5 | "author": "Felix Gnass ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/react"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "./lib/index.js",
14 | "files": [
15 | "lib"
16 | ],
17 | "exports": {
18 | ".": {
19 | "default": "./lib/index.js"
20 | },
21 | "./server": {
22 | "default": "./lib/server.js"
23 | }
24 | },
25 | "typesVersions": {
26 | "*": {
27 | "index.d.ts": [
28 | "lib/index.d.ts"
29 | ],
30 | "server": [
31 | "lib/server.d.ts"
32 | ]
33 | }
34 | },
35 | "dependencies": {
36 | "capri": "^5.2.3",
37 | "react-render-to-string": "^2.1.0"
38 | },
39 | "devDependencies": {
40 | "@types/react-dom": "^18.2.18"
41 | },
42 | "peerDependencies": {
43 | "react": "^18.1.0",
44 | "react-dom": "^18.1.0",
45 | "vite": "3.x || 4.x"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/packages/react/src/capri.d.ts:
--------------------------------------------------------------------------------
1 | declare module "virtual:capri-component" {
2 | import { IslandOptions } from "capri";
3 | import { ComponentType } from "react";
4 |
5 | const value: ComponentType;
6 | export default value;
7 |
8 | export const options: IslandOptions;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/hydrate.ts:
--------------------------------------------------------------------------------
1 | import { ComponentType, createElement } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 |
4 | export default function hydrate(
5 | component: ComponentType,
6 | props: Record,
7 | element: Element,
8 | ) {
9 | const children = element.querySelector("capri-children");
10 | if (children) {
11 | props.children = createElement("capri-children", {
12 | style: { display: "contents" },
13 | dangerouslySetInnerHTML: { __html: "" },
14 | });
15 | }
16 | return hydrateRoot(element.parentElement!, createElement(component, props));
17 | }
18 |
--------------------------------------------------------------------------------
/packages/react/src/index.ts:
--------------------------------------------------------------------------------
1 | import { capri, CapriAdapterPluginOptions } from "capri/vite-plugin";
2 | import type { Plugin } from "vite";
3 |
4 | export default function (opts: CapriAdapterPluginOptions = {}): Plugin[] {
5 | const resolve = (f: string) => new URL(f, import.meta.url).pathname;
6 |
7 | return [
8 | {
9 | name: "capri-react-config",
10 | config() {
11 | // In projects with only a server entry, Vite won't pick up the
12 | // dependencies correctly when running inside a dev-server.
13 | return {
14 | optimizeDeps: {
15 | include: ["react-dom/client"],
16 | },
17 | };
18 | },
19 | },
20 | ...capri({
21 | ...opts,
22 | adapter: {
23 | hydrate: resolve("./hydrate.js"),
24 | island: {
25 | server: resolve("./island.server.jsx"),
26 | },
27 | lagoon: {
28 | server: resolve("./lagoon.server.jsx"),
29 | client: resolve("./lagoon.client.jsx"),
30 | },
31 | },
32 | }),
33 | ];
34 | }
35 |
--------------------------------------------------------------------------------
/packages/react/src/island.server.jsx:
--------------------------------------------------------------------------------
1 | import * as componentModule from "virtual:capri-component";
2 |
3 | const { default: Component, options } = componentModule;
4 |
5 | function Island({ children, ...props }) {
6 | const wrappedChildren = children && (
7 | {children}
8 | );
9 |
10 | const scriptContent = JSON.stringify({ props, options });
11 | return (
12 |
13 | {wrappedChildren}
14 |
19 |
20 | );
21 | }
22 |
23 | export default Island;
24 |
--------------------------------------------------------------------------------
/packages/react/src/lagoon.client.jsx:
--------------------------------------------------------------------------------
1 | export default function Lagoon() {
2 | return (
3 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/server.ts:
--------------------------------------------------------------------------------
1 | import { RenderContext, StaticRenderContext } from "capri/context";
2 | import { createContext, createElement, ReactNode, useContext } from "react";
3 | import render from "react-render-to-string";
4 |
5 | export type { RenderContext, RenderFunction } from "capri";
6 |
7 | const renderContext = createContext(new StaticRenderContext());
8 |
9 | export function renderToString(children: ReactNode, context?: RenderContext) {
10 | const node = context
11 | ? createElement(renderContext.Provider, { value: context, children })
12 | : children;
13 |
14 | return render(node);
15 | }
16 |
17 | export const useRenderContext = () => useContext(renderContext);
18 |
19 | export const useStatus = (code: number) => {
20 | const ctx = useRenderContext();
21 | if (import.meta.env.SSR) {
22 | ctx.status(code);
23 | }
24 | };
25 |
--------------------------------------------------------------------------------
/packages/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src",
6 | "types": ["vite/client"]
7 | },
8 | "references": [
9 | { "path": "../capri" },
10 | { "path": "../react-render-to-string" }
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/packages/solid/README.md:
--------------------------------------------------------------------------------
1 | # SolidJS bindings for Capri 🍋
2 |
3 | ## Usage
4 |
5 | ```ts
6 | // vite.config.ts
7 | import { defineConfig } from "vite";
8 | import solid from "vite-plugin-solid";
9 | import capri from "@capri-js/solid";
10 |
11 | export default defineConfig({
12 | plugins: [
13 | solid({
14 | ssr: true,
15 | }),
16 | capri(),
17 | ],
18 | });
19 | ```
20 |
21 | Visit [capri.build](https://capri.build) for docs and more information.
22 |
--------------------------------------------------------------------------------
/packages/solid/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@capri-js/solid",
3 | "version": "5.1.4",
4 | "description": "",
5 | "author": "Felix Gnass ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/solid"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "./lib/index.js",
14 | "files": [
15 | "lib"
16 | ],
17 | "exports": {
18 | ".": {
19 | "default": "./lib/index.js"
20 | },
21 | "./server": {
22 | "default": "./lib/server.js"
23 | }
24 | },
25 | "typesVersions": {
26 | "*": {
27 | "index.d.ts": [
28 | "lib/index.d.ts"
29 | ],
30 | "server": [
31 | "lib/server.d.ts"
32 | ]
33 | }
34 | },
35 | "dependencies": {
36 | "capri": "^5.2.3"
37 | },
38 | "devDependencies": {
39 | "solid-js": "^1.4.2"
40 | },
41 | "peerDependencies": {
42 | "solid-js": "^1.4.2",
43 | "vite": "3.x || 4.x"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/solid/src/capri.d.ts:
--------------------------------------------------------------------------------
1 | declare module "virtual:capri-component" {
2 | import { IslandOptions } from "capri";
3 | import { JSX } from "solid-js";
4 |
5 | const value: (props: any) => JSX.Element;
6 | export default value;
7 |
8 | export const options: IslandOptions;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/solid/src/hydrate.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from "solid-js";
2 | import { hydrate as solidHydrate } from "solid-js/web";
3 |
4 | export default function hydrate(
5 | component: (props: any) => JSX.Element,
6 | props: Record,
7 | element: Element,
8 | ) {
9 | const key = element.getAttribute("data-hk");
10 | if (!key) {
11 | throw new Error("Can't hydrate an element without a data-hk attribute.");
12 | }
13 |
14 | const children = element.querySelector("capri-children");
15 | if (children) {
16 | //TODO Must this be styled?
17 | props.children = (
18 | {children} ;
29 |
30 | return (
31 |
32 |
33 | {wrappedChildren}
34 |
35 |
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/packages/solid/src/jsx.d.ts:
--------------------------------------------------------------------------------
1 | import "solid-js";
2 |
3 | declare module "solid-js" {
4 | namespace JSX {
5 | interface IntrinsicElements {
6 | "capri-island": JSX.IntrinsicElements["div"];
7 | "capri-children": JSX.IntrinsicElements["div"];
8 | "capri-lagoon": JSX.IntrinsicElements["div"];
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/solid/src/lagoon.client.jsx:
--------------------------------------------------------------------------------
1 | export default function Lagoon() {
2 | return ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/svelte"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "./lib/index.js",
14 | "files": [
15 | "lib"
16 | ],
17 | "exports": {
18 | ".": {
19 | "default": "./lib/index.js"
20 | },
21 | "./server": {
22 | "default": "./lib/server.js"
23 | }
24 | },
25 | "typesVersions": {
26 | "*": {
27 | "index.d.ts": [
28 | "lib/index.d.ts"
29 | ],
30 | "server": [
31 | "lib/server.d.ts"
32 | ]
33 | }
34 | },
35 | "dependencies": {
36 | "capri": "^5.2.3"
37 | },
38 | "devDependencies": {
39 | "svelte": "^3.49.0"
40 | },
41 | "peerDependencies": {
42 | "svelte": "^3.49.0",
43 | "vite": "3.x || 4.x"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/svelte/src/capri.d.ts:
--------------------------------------------------------------------------------
1 | declare module "virtual:capri-component" {
2 | import { IslandOptions } from "capri";
3 |
4 | const value: any;
5 | export default value;
6 |
7 | export const options: IslandOptions;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/hydrate.ts:
--------------------------------------------------------------------------------
1 | import { detach, insert, noop } from "svelte/internal";
2 |
3 | export default function hydrate(
4 | Component: any,
5 | props: object,
6 | element: Element,
7 | ) {
8 | const $$slots: any = {};
9 | element.querySelectorAll("capri-slot").forEach((el) => {
10 | const name = el.getAttribute("name")!;
11 | $$slots[name] = [
12 | () => ({
13 | c: noop,
14 | m(target: Element, anchor: any) {
15 | insert(target, el, anchor);
16 | },
17 | l: noop,
18 | p: noop,
19 | d(detaching: any) {
20 | if (detaching) detach(el);
21 | },
22 | }),
23 | ];
24 | });
25 | new Component({
26 | target: element.parentNode,
27 | props: {
28 | ...props,
29 | $$scope: { ctx: {} },
30 | $$slots,
31 | },
32 | hydrate: true,
33 | });
34 | }
35 |
--------------------------------------------------------------------------------
/packages/svelte/src/index.ts:
--------------------------------------------------------------------------------
1 | import { capri, CapriAdapterPluginOptions } from "capri/vite-plugin";
2 |
3 | export default function (opts: CapriAdapterPluginOptions = {}) {
4 | const resolve = (f: string) => new URL(f, import.meta.url).pathname;
5 | return capri({
6 | ...opts,
7 | adapter: {
8 | injectWrapper: "onTransform",
9 | hydrate: resolve("./hydrate.js"),
10 | island: {
11 | server: resolve("./island.server.js"),
12 | },
13 | lagoon: {
14 | server: resolve("./lagoon.server.js"),
15 | client: resolve("./lagoon.client.js"),
16 | },
17 | },
18 | });
19 | }
20 |
--------------------------------------------------------------------------------
/packages/svelte/src/island.server.js:
--------------------------------------------------------------------------------
1 | import { create_ssr_component } from "svelte/internal";
2 | import * as componentModule from "virtual:capri-component";
3 |
4 | export * from "virtual:capri-component";
5 |
6 | const { default: component, options = {} } = componentModule;
7 |
8 | export default create_ssr_component((result, props, bindings, slots) => {
9 | const wrappedSlots = Object.fromEntries(
10 | Object.entries(slots).map(([name, fn]) => [
11 | name,
12 | () =>
13 | `${fn()} `,
14 | ]),
15 | );
16 | const html = component.$$render(result, props, bindings, wrappedSlots);
17 | return `
18 | ${html}
19 |
22 | `;
23 | });
24 |
--------------------------------------------------------------------------------
/packages/svelte/src/lagoon.client.js:
--------------------------------------------------------------------------------
1 | import {
2 | claim_element,
3 | init,
4 | insert_hydration,
5 | noop,
6 | safe_not_equal,
7 | SvelteComponent,
8 | } from "svelte/internal";
9 |
10 | function create_fragment(ctx) {
11 | let el;
12 | return {
13 | c: noop,
14 | m(target, anchor) {
15 | insert_hydration(target, el, anchor);
16 | },
17 | l(nodes) {
18 | el = claim_element(nodes, "CAPRI-LAGOON", {});
19 | },
20 | p: noop,
21 | d: noop,
22 | };
23 | }
24 |
25 | export default class Lagoon extends SvelteComponent {
26 | constructor(options) {
27 | super();
28 | init(this, options, null, create_fragment, safe_not_equal, {});
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/svelte/src/lagoon.server.js:
--------------------------------------------------------------------------------
1 | import { create_ssr_component } from "svelte/internal";
2 | import component from "virtual:capri-component";
3 |
4 | export default create_ssr_component((result, props, bindings, slots) => {
5 | const html = component.$$render(result, props, bindings, slots);
6 | return `${html} `;
7 | });
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/server.ts:
--------------------------------------------------------------------------------
1 | export type { RenderFunction } from "capri";
2 |
--------------------------------------------------------------------------------
/packages/svelte/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | },
7 | "references": [{ "path": "../capri" }]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "strict": true,
5 | "module": "ESNext",
6 | "moduleResolution": "Node",
7 | "allowJs": true,
8 | "allowSyntheticDefaultImports": true,
9 | "target": "ES2020",
10 | "lib": ["ES2020", "DOM"],
11 | "declaration": true,
12 | "isolatedModules": true,
13 | "skipLibCheck": true,
14 | "jsx": "preserve"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "references": [
3 | { "path": "create" },
4 | { "path": "preact" },
5 | { "path": "react" },
6 | { "path": "solid" },
7 | { "path": "svelte" },
8 | { "path": "vue" },
9 | { "path": "vercel" },
10 | { "path": "cloudflare" },
11 | { "path": "react-render-to-string" }
12 | ],
13 | "exclude": ["*"]
14 | }
15 |
--------------------------------------------------------------------------------
/packages/vercel/README.md:
--------------------------------------------------------------------------------
1 | # Capri 🍋 SSR on Vercel
2 |
3 | Use `@capri-js/vercel` to render your static pages using either
4 |
5 | - a [serverless function](https://vercel.com/docs/concepts/functions/serverless-functions)
6 | - a [prerender function](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration)
7 | - or an [edge function](https://vercel.com/docs/build-output-api/v3#vercel-primitives/edge-functions)
8 |
9 | _NOTE:_ This is only needed for SSR. For static sites that are prerendered upon build,
10 | leave the target set to `undefined`.
11 |
12 | https://vercel.com/docs/build-output-api/v3
13 |
14 | ## Usage
15 |
16 | ```ts
17 | // vite.config.ts
18 | import { defineConfig } from "vite";
19 | import react from "@vitejs/plugin-react";
20 | import capri from "@capri-js/react";
21 | import vercel from "@capri-js/vercel";
22 |
23 | export default defineConfig({
24 | plugins: [
25 | react(),
26 | capri({
27 | target: vercel({
28 | // options (see below)
29 | }),
30 | }),
31 | ],
32 | });
33 | ```
34 |
35 | ## Options
36 |
37 | ### `edge`
38 |
39 | Whether to create an edge function (default `false`).
40 |
41 | ### `isg`
42 |
43 | Settings for [Incremental Static Rendering](https://vercel.com/docs/build-output-api/v3#vercel-primitives/prerender-functions/configuration).
44 |
45 | ```ts
46 | {
47 | expiration: number | false;
48 | bypassToken?: string;
49 | }
50 | ```
51 |
--------------------------------------------------------------------------------
/packages/vercel/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@capri-js/vercel",
3 | "version": "1.1.3",
4 | "description": "",
5 | "author": "Felix Gnass ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/vercel"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "./lib/index.js",
14 | "files": [
15 | "lib"
16 | ],
17 | "dependencies": {
18 | "capri": "^5.2.3"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/vercel/src/edge.ts:
--------------------------------------------------------------------------------
1 | import ssr from "virtual:capri-ssr";
2 |
3 | export default async (request: Request) => {
4 | const url = new URL(request.url).pathname;
5 |
6 | let status = 200;
7 | const headers = new Headers({
8 | "Content-Type": "text/html; charset=utf-8",
9 | });
10 |
11 | const html = await ssr(url, {
12 | status(code) {
13 | status = code;
14 | },
15 | getHeader: request.headers.get.bind(request.headers),
16 | setHeader: headers.set.bind(headers),
17 | });
18 | return new Response(html, {
19 | status,
20 | headers,
21 | });
22 | };
23 |
--------------------------------------------------------------------------------
/packages/vercel/src/index.ts:
--------------------------------------------------------------------------------
1 | import { BuildTarget } from "capri/vite-plugin";
2 | import { builtinModules } from "module";
3 | import * as path from "path";
4 |
5 | interface VercelConfig {
6 | edge?: boolean;
7 | isg?: {
8 | expiration: number | false;
9 | bypassToken?: string;
10 | };
11 | }
12 | export default function vercel({
13 | edge = false,
14 | isg,
15 | }: VercelConfig = {}): BuildTarget {
16 | return {
17 | config() {
18 | return {
19 | build: {
20 | outDir: path.join(".vercel", "output", "static"),
21 | },
22 | ssr: {
23 | target: edge ? "webworker" : "node",
24 | // Inline everything except for node builtins...
25 | noExternal: /.*/,
26 | external: builtinModules,
27 | },
28 | };
29 | },
30 | async build({ outDir, bundle, fsutils }) {
31 | const dirName = path.dirname(new URL(import.meta.url).pathname);
32 | const rootDir = path.resolve(outDir, "..");
33 | const funcDir = path.resolve(rootDir, "functions", "render.func");
34 |
35 | if (!edge) {
36 | // Create package.json to enable ESM
37 | fsutils.write(
38 | path.resolve(funcDir, "package.json"),
39 | JSON.stringify({ type: "module" }),
40 | );
41 | }
42 |
43 | // Create the handler
44 | await bundle(
45 | path.resolve(
46 | dirName,
47 | edge ? "edge.js" : isg ? "isg.js" : "serverless.js",
48 | ),
49 | path.resolve(funcDir, "index.js"),
50 | {
51 | platform: edge ? "browser" : "node",
52 | },
53 | );
54 |
55 | // Create .vc-config.json
56 | const runtime = edge
57 | ? { runtime: "edge" }
58 | : { runtime: "nodejs16.x", launcherType: "Nodejs" };
59 |
60 | fsutils.write(
61 | path.resolve(funcDir, ".vc-config.json"),
62 | JSON.stringify({
63 | ...runtime,
64 | [edge ? "entrypoint" : "handler"]: "index.js",
65 | }),
66 | );
67 |
68 | if (isg) {
69 | if (edge) {
70 | throw new Error(
71 | "Incremental Static Generation is not supported on the edge.",
72 | );
73 | }
74 | fsutils.write(
75 | path.resolve(funcDir, "..", "render.prerender-config.json"),
76 | JSON.stringify({ allowQuery: [], ...isg }),
77 | );
78 | }
79 |
80 | // Create config.json
81 | fsutils.write(
82 | path.resolve(rootDir, "config.json"),
83 | JSON.stringify({
84 | version: 3,
85 | routes: [
86 | {
87 | handle: "filesystem",
88 | },
89 | {
90 | src: isg ? "(?.*)" : "/.*",
91 | [edge ? "middlewarePath" : "dest"]: "render",
92 | },
93 | ],
94 | }),
95 | );
96 | },
97 | };
98 | }
99 |
--------------------------------------------------------------------------------
/packages/vercel/src/isg.ts:
--------------------------------------------------------------------------------
1 | import type { IncomingMessage, ServerResponse } from "node:http";
2 |
3 | import ssr from "virtual:capri-ssr";
4 |
5 | export default async (req: IncomingMessage, res: ServerResponse) => {
6 | if (!req.headers.accept?.includes("text/html")) {
7 | return res.writeHead(404).end();
8 | }
9 | const route = req.headers["x-now-route-matches"];
10 | if (typeof route !== "string") {
11 | return res.writeHead(400, "Header x-now-route-matches expected").end();
12 | }
13 | const match = decodeURIComponent(new URLSearchParams(route).get("1")!);
14 | res.setHeader("Content-Type", "text/html; charset=utf-8");
15 | const html = await ssr(match, {
16 | status(code) {
17 | res.statusCode = code;
18 | },
19 | getHeader(name: string) {
20 | const header = req.headers[name] ?? null;
21 | return Array.isArray(header) ? header[0] : header;
22 | },
23 | setHeader: res.setHeader.bind(res),
24 | });
25 | res.end(html);
26 | };
27 |
--------------------------------------------------------------------------------
/packages/vercel/src/serverless.ts:
--------------------------------------------------------------------------------
1 | import type { IncomingMessage, ServerResponse } from "node:http";
2 |
3 | import ssr from "virtual:capri-ssr";
4 |
5 | export default async (req: IncomingMessage, res: ServerResponse) => {
6 | if (!req.headers.accept?.includes("text/html")) {
7 | res.writeHead(404).end();
8 | } else {
9 | res.setHeader("Content-Type", "text/html; charset=utf-8");
10 | const html = await ssr(req.url!, {
11 | status(code) {
12 | res.statusCode = code;
13 | },
14 | getHeader(name: string) {
15 | const header = req.headers[name] ?? null;
16 | return Array.isArray(header) ? header[0] : header;
17 | },
18 | setHeader: res.setHeader.bind(res),
19 | });
20 | res.end(html);
21 | }
22 | };
23 |
--------------------------------------------------------------------------------
/packages/vercel/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src",
6 | "types": ["capri/ssr"]
7 | },
8 | "references": [{ "path": "../capri" }]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/vue/README.md:
--------------------------------------------------------------------------------
1 | # Vue bindings for Capri 🍋
2 |
3 | ## Usage
4 |
5 | ```ts
6 | // vite.config.ts
7 | import { defineConfig } from "vite";
8 | import react from "@vitejs/plugin-vue";
9 | import capri from "@capri-js/vue";
10 |
11 | export default defineConfig({
12 | plugins: [react(), capri()],
13 | });
14 | ```
15 |
16 | Visit [capri.build](https://capri.build) for docs and more information.
17 |
--------------------------------------------------------------------------------
/packages/vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@capri-js/vue",
3 | "version": "2.1.4",
4 | "description": "",
5 | "author": "Felix Gnass ",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/capri-js/capri",
9 | "directory": "packages/vue"
10 | },
11 | "license": "MIT",
12 | "type": "module",
13 | "main": "./lib/index.js",
14 | "files": [
15 | "lib"
16 | ],
17 | "exports": {
18 | ".": {
19 | "default": "./lib/index.js"
20 | },
21 | "./server": {
22 | "default": "./lib/server.js"
23 | }
24 | },
25 | "typesVersions": {
26 | "*": {
27 | "index.d.ts": [
28 | "lib/index.d.ts"
29 | ],
30 | "server": [
31 | "lib/server.d.ts"
32 | ]
33 | }
34 | },
35 | "dependencies": {
36 | "capri": "^5.2.3"
37 | },
38 | "devDependencies": {
39 | "vue": "^3.2.37"
40 | },
41 | "peerDependencies": {
42 | "vite": "3.x || 4.x",
43 | "vue": "^3.2.37"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/vue/src/capri.d.ts:
--------------------------------------------------------------------------------
1 | declare module "virtual:capri-component" {
2 | import { IslandOptions } from "capri";
3 | import { ComponentType } from "react";
4 |
5 | const value: ComponentType;
6 | export default value;
7 |
8 | export const options: IslandOptions;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/vue/src/hydrate.ts:
--------------------------------------------------------------------------------
1 | import { createSSRApp, h } from "vue";
2 |
3 | export default function hydrate(
4 | component: any,
5 | props: Record,
6 | element: Element,
7 | ) {
8 | const slots: any = {};
9 | element.querySelectorAll("capri-slot").forEach((el) => {
10 | const name = el.getAttribute("name")!;
11 | slots[name] = h("capri-slot", {
12 | name,
13 | style: "display:contents",
14 | innerHTML: el.innerHTML,
15 | });
16 | });
17 | const app = createSSRApp({
18 | /* name, */ render: () => h(component, props, slots),
19 | });
20 | app.mount(element.parentElement!);
21 | }
22 |
--------------------------------------------------------------------------------
/packages/vue/src/index.ts:
--------------------------------------------------------------------------------
1 | import { capri, CapriAdapterPluginOptions } from "capri/vite-plugin";
2 |
3 | export default function (opts: CapriAdapterPluginOptions = {}) {
4 | const resolve = (f: string) => new URL(f, import.meta.url).pathname;
5 | return capri({
6 | ...opts,
7 | adapter: {
8 | injectWrapper: "onTransform",
9 | hydrate: resolve("./hydrate.js"),
10 | island: {
11 | server: resolve("./island.server.js"),
12 | },
13 | lagoon: {
14 | server: resolve("./lagoon.server.jsx"),
15 | client: resolve("./lagoon.client.jsx"),
16 | },
17 | },
18 | });
19 | }
20 |
--------------------------------------------------------------------------------
/packages/vue/src/island.server.js:
--------------------------------------------------------------------------------
1 | import * as componentModule from "virtual:capri-component";
2 | import { withCtx } from "vue";
3 | import { ssrRenderComponent, ssrRenderSlot } from "vue/server-renderer";
4 |
5 | const { default: component, options } = componentModule;
6 |
7 | const __sfc__ = {
8 | __name: "Island",
9 | __ssrInlineRender: true,
10 | setup(__props) {
11 | return (_ctx, _push, _parent, _attrs) => {
12 | const slots = Object.fromEntries(
13 | Object.entries(_ctx.$slots).map(([name, fn]) => [
14 | name,
15 | withCtx((_, _push, _parent, _scopeId) => {
16 | _push(``);
17 | ssrRenderSlot(
18 | _ctx.$slots,
19 | name,
20 | {},
21 | null,
22 | _push,
23 | _parent,
24 | _scopeId,
25 | );
26 | _push(` `);
27 | }),
28 | ]),
29 | );
30 |
31 | _push(``);
32 | _push(ssrRenderComponent(component, _attrs, slots, _parent));
33 | _push(
34 | ``,
37 | );
38 | _push(` `);
39 | };
40 | },
41 | };
42 | __sfc__.__file = "%COMPONENT_ID%";
43 | export default __sfc__;
44 |
--------------------------------------------------------------------------------
/packages/vue/src/lagoon.client.jsx:
--------------------------------------------------------------------------------
1 | import { createElementVNode, createStaticVNode } from "vue";
2 |
3 | export default {
4 | render() {
5 | return createElementVNode("capri-lagoon", {}, [createStaticVNode("", 1)]);
6 | },
7 | __file: "%COMPONENT_ID%",
8 | };
9 |
--------------------------------------------------------------------------------
/packages/vue/src/lagoon.server.jsx:
--------------------------------------------------------------------------------
1 | import component from "virtual:capri-component";
2 | import { ssrRenderComponent } from "vue/server-renderer";
3 |
4 | const __sfc__ = {
5 | __name: "Lagoon",
6 | __ssrInlineRender: true,
7 | setup(__props) {
8 | return (_ctx, _push, _parent, _attrs) => {
9 | _push(``);
10 | _push(ssrRenderComponent(component, _attrs, _ctx.$slots, _parent));
11 | _push(` `);
12 | };
13 | },
14 | };
15 | __sfc__.__file = "%COMPONENT_ID%";
16 | export default __sfc__;
17 |
--------------------------------------------------------------------------------
/packages/vue/src/server.ts:
--------------------------------------------------------------------------------
1 | export type { RenderFunction } from "capri";
2 |
--------------------------------------------------------------------------------
/packages/vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | },
7 | "references": [
8 | { "path": "../capri" },
9 | { "path": "../react-render-to-string" }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/test/dom.ts:
--------------------------------------------------------------------------------
1 | import legacy from "@vitejs/plugin-legacy";
2 | import { JSDOM } from "jsdom";
3 | import * as path from "path";
4 | import { build } from "vite";
5 |
6 | export async function getExampleDOM(root: string) {
7 | const base = path.join(root, "dist") + "/";
8 | await build({ root, base, plugins: [legacy()] });
9 | await build({ root, base, build: { ssr: true } });
10 | const dom = await JSDOM.fromFile(path.join(root, "dist", "index.html"), {
11 | url: `file://${root}/dist/index.html`,
12 | runScripts: "dangerously",
13 | resources: "usable",
14 | });
15 | return dom;
16 | }
17 |
--------------------------------------------------------------------------------
/test/e2e.test.ts:
--------------------------------------------------------------------------------
1 | import { waitFor, within } from "@testing-library/dom";
2 | import * as path from "path";
3 | import { describe, expect, test } from "vitest";
4 |
5 | import { getExampleDOM } from "./dom.js";
6 |
7 | describe("examples", () => {
8 | test.each([["vue"], ["react"], ["preact"], ["solid"], ["svelte"]])(
9 | "%s",
10 | async (example) => {
11 | const root = path.resolve(__dirname, "../examples", example);
12 | const dom = await getExampleDOM(root);
13 |
14 | global.window = dom.window as any;
15 | global.document = dom.window.document;
16 |
17 | const { default: userEvent } = await import(
18 | "@testing-library/user-event"
19 | );
20 | const user = userEvent.setup({ document });
21 |
22 | const screen = within(dom.window.document.body);
23 | const styles = document.querySelector('link[rel="stylesheet"]');
24 | expect(styles).toBeTruthy();
25 |
26 | const [counter1, counter2] = await screen.findAllByTestId("counter");
27 | const value1 = counter1.querySelector("span");
28 | const value2 = counter2.querySelector("span");
29 | const inc1 = await within(counter1).findByText("+");
30 | const inc2 = await within(counter2).findByText("+");
31 |
32 | expect(value1).toHaveTextContent("0");
33 | expect(value2).toHaveTextContent("100");
34 |
35 | await waitFor(async () => {
36 | await user.click(inc1);
37 | expect(value1?.textContent).not.toBe("0");
38 | });
39 |
40 | await user.click(inc2);
41 | await waitFor(async () => {
42 | expect(value2?.textContent).toBe("101");
43 | });
44 | },
45 | {
46 | timeout: 60000,
47 | },
48 | );
49 | });
50 |
--------------------------------------------------------------------------------
/test/setup.ts:
--------------------------------------------------------------------------------
1 | // Extend Vitest's matchers with the ones provided by Testing Library:
2 | import "@testing-library/jest-dom";
3 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowJs": true,
7 | "allowSyntheticDefaultImports": true,
8 | "target": "ES2020",
9 | "lib": ["ES2020", "DOM"],
10 | "skipLibCheck": true,
11 | "noEmit": true
12 | },
13 | "include": ["./*.ts", "./.eslintrc.cjs", "./test"]
14 | }
15 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vitest/config";
2 |
3 | export default defineConfig({
4 | test: {
5 | globals: true,
6 | setupFiles: "test/setup.ts",
7 | testTimeout: 15000,
8 | },
9 | });
10 |
--------------------------------------------------------------------------------