From c1c758576c39557ffa3415fc51b4e0f1733b9248 Mon Sep 17 00:00:00 2001 From: Jean-Louis GUENEGO Date: Wed, 16 Jul 2025 14:31:08 +0200 Subject: [PATCH 1/3] Add support during template creation for pnpm and bun (#2007) --- src/create.ts | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/create.ts b/src/create.ts index 3b6a07699..0d0ec7950 100644 --- a/src/create.ts +++ b/src/create.ts @@ -77,6 +77,8 @@ export async function create(effects: CreateEffects = defaultEffects): Promise reset(cyan(line))).join("\n"), "Next steps…"); From 01aa5fda48c7b34553cace12f4a1a54ff48c2dd9 Mon Sep 17 00:00:00 2001 From: Jean-Louis GUENEGO Date: Wed, 16 Jul 2025 15:05:40 +0200 Subject: [PATCH 2/3] Update package manager commands in create script and documentation --- docs/getting-started.md | 19 +++++++++++++++---- src/create.ts | 4 ++-- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index 5e803b0ca..90a4196dd 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -80,7 +80,7 @@ These are just first steps. You can continue to develop apps after publishing, a ## 1. Create -Framework includes a helper script (`observable create`) for creating new apps. After a few quick prompts — where to create the project, your preferred package manager, *etc.* — it will stamp out a fresh project from a template. +Framework includes a helper script (`observable create`) for creating new apps. After a few quick prompts — where to create the project, your preferred package manager, _etc._ — it will stamp out a fresh project from a template.

Framework is a Node.js application published to npm. You must have Node.js 18 or later installed before you can install Framework. Framework is a command-line interface (CLI) that runs in the terminal.

@@ -146,6 +146,17 @@ Or with Yarn: 
yarn dev
+Or with Pnpm: + +
+pnpm approve-builds
+pnpm dev
+
+ +Or with Bun: + +
bun dev
+ You should see something like this: 
Observable Framework v1.13.3
@@ -181,7 +192,7 @@ Now visit  in your browser, which should look like:
 
 ### Test live preview
 
-Live preview means that as you save changes, your in-browser preview updates instantly. Live preview applies to Markdown pages, imported JavaScript modules (so-called *hot module replacement*), data loaders, page loaders, and file attachments. This feature is implemented by the preview server watching files and pushing changes to the browser over a socket.
+Live preview means that as you save changes, your in-browser preview updates instantly. Live preview applies to Markdown pages, imported JavaScript modules (so-called _hot module replacement_), data loaders, page loaders, and file attachments. This feature is implemented by the preview server watching files and pushing changes to the browser over a socket.
 
 To experience live preview, open src/index.md in your preferred text editor — below we show Zed — and position your browser window so that you can see your editor and browser side-by-side. If you then replace the text “Hello Framework” with “Hi, Mom!” and save, you should see:
 
@@ -219,7 +230,7 @@ If you click on the **Weather report** link in the sidebar, it’ll take you to
 
 
The sidebar is hidden by default in narrow windows. If you don’t see the sidebar, you can show it by making the window wider, or using Command-B (⌘B) or Option-B (⌥B) on Firefox and non-macOS, or clicking the right-pointing arrow ↦ on the left edge of the window.

 
-As evidenced by the code 1 + 2 rendered as 3, JavaScript fenced code blocks (```js) are *live*: the code runs in the browser. Try replacing 2 with Math.random(), and the code will re-run automatically on save. In a bit, we’ll write code to render a chart. We can also use code to debug as we develop, say to inspect data.
+As evidenced by the code 1 + 2 rendered as 3, JavaScript fenced code blocks (```js) are _live_: the code runs in the browser. Try replacing 2 with Math.random(), and the code will re-run automatically on save. In a bit, we’ll write code to render a chart. We can also use code to debug as we develop, say to inspect data.
 
 ### Data loader
 
@@ -397,7 +408,7 @@ As before, the code block contains an expression (a call to `Plot.plot`) and hen
 
 ### Components
 
-As pages grow, complex inline JavaScript may become unwieldy and repetitive. Tidy code by moving it into functions. In Framework, a function that returns a DOM element is called a *component*.
+As pages grow, complex inline JavaScript may become unwieldy and repetitive. Tidy code by moving it into functions. In Framework, a function that returns a DOM element is called a _component_.
 
 To turn the chart above into a component, wrap it in a function and promote the `data` to a required argument. Accept any named options (such as `width`) as an optional second argument with destructuring.
 
diff --git a/src/create.ts b/src/create.ts
index 0d0ec7950..c69abb9d1 100644
--- a/src/create.ts
+++ b/src/create.ts
@@ -100,9 +100,9 @@ export async function create(effects: CreateEffects = defaultEffects): Promise
Date: Wed, 16 Jul 2025 17:46:41 +0200
Subject: [PATCH 3/3] add doc for build (#2007)

---
 docs/getting-started.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/getting-started.md b/docs/getting-started.md
index 90a4196dd..1a97a66e4 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -497,6 +497,14 @@ Or with Yarn:
 
 
yarn build

 
+Or with Pnpm:
+
+
pnpm build

+
+Or with Bun
+
+
bun run build

+
 The build command generates the `dist` directory; you can then upload this directory to your preferred hosting provider or copy it to your static site server for self-hosting. To preview your built app locally, you can use a local static HTTP server such as [http-server](https://github.com/http-party/http-server):
 
 
npx http-server dist