Zenn
Open7

JSR Package 登録 , React Svelte Vue インポート

React
npm
Node.js
JSR
knaka Tech-Blogknaka Tech-Blog

概要

  • JSR メモになります。
  • JSR 初任者ですが。deno Package 管理的なイメージでした。
  • npm に似ています。

[ 公開 2025/03/29 ]

構成

  • JSR
  • npm
  • node 20

関連

JSR install

  • global 追加の場合
npm i -g jsr
  • 補足: Package追加の例、 npm 版
npx jsr add @luca/cases

jsr 登録

  • フォルダ登録
mkdir add-func 
cd add-func

  • jsr.json, main.ts 追加

  • tree

$ tree .
.
├── jsr.json
└── main.ts
  • jsr.json
  • @scope/name の組み合わせ。
  • name は、適宜に変更下さい、
{
  "name": "@kotan-kndev/add-func",
  "version": "0.9.1",
  "license": "MIT",
  "exports": "./main.ts"
}
  • main.ts

export function add(a: number, b: number): number {
  return a + b;
}
  • jsr.ioに、アカウント登録が必要(Github アカウントでOK)
  • 登録 (publish)
  • 初回登録時に、scopeの登録の確認あった気がします。
npx jsr publish

  • 試しに 、別フォルダ等でinstall(jsr add)
npx jsr add @kotan-kndev/add-func
  • Log
>npx jsr add @kotan-kndev/add-func
Setting up .npmrc...ok
Installing @kotan-kndev/add-func...
$ npm install @kotan-kndev/add-func@npm:@jsr/kotan-kndev__add-func

added 1 package in 912ms

Completed in 1s
knaka Tech-Blogknaka Tech-Blog

React 画面、JSR Package からインポートする例

  • JSRは、deno (npm , bun) 環境対応のようです。
  • ブラウザは、未対象らしいです。
  • jsファイルを、Package　登録すると。画面追加できそうでした。
  • 対象 フロントJSの種類は、 viteがサポートしている種類に 限定されます　(今のところ)

構成

  • JSR
  • Nitro Server
  • React
  • npm
  • node 20

React package開始

画面単位で、JSR 登録

参考。 react

  • src/client/page1.tsx
import ReactDOM from 'react-dom/client'
import React from 'react'

const Page: React.FC = () => {
  return (
  <div className="text-3xl"><h1>Page1</h1> 
    <hr />
    <span><a href="/">[ home ]</a>
    </span>
  </div>
  );
};
ReactDOM.createRoot(document.getElementById('app')).render(
  <div>
    <Page />
  </div>
);
  • react-build
  • react_mpa/vite.config.ts

https://github.com/kuc-arc-f/nitro_5ex/blob/main/react_mpa/vite.config.ts

entry: ./src/client/page1.tsx に、変更します

    build: {
      lib: {
        entry: ["./src/client/page1.tsx"],
        formats: ['es'],
        fileName: '[name]',
      },


npx vite build
  • public/static/page1.js が出力されます。

JSR package add

  • jsr フォルダ作成（適当な名前）
mkdir re25_0331page1
cd re25_0331page1
  • tree
tree .
.
├── jsr.json
└── src
    └── main.js
  • jsr.json
  • name, versionは、適宜に変更下さい。
{
  "name": "@kotan-kndev/re25-0331page1",
  "version": "0.9.5",
  "license": "MIT",
  "exports": "./src/main.js"
}
  • React jsファイルコピー

public/static/page1.js を、jsr フォルダ　の、src/main.js　に、コピーします。

  • JSR 登録
npx jsr publish

JSR install

  • 例で今回は、page1　を追加した react環境にインストールします、
  • 参考のパス
  • /page1 : JSR package作成
  • /page2 : JSR　install する、React 画面
  • package install
npx jsr add @kotan-kndev/re25-0331page1
  • package.json dependencies　は、@kotan-kndev/re25-0331page1　追加されます。
  "dependencies": {
    "@kotan-kndev/re25-0331page1": "npm:@jsr/kotan-kndev__re25-0331page1@^0.9.5",
  • src/client/page2.tsx
console.log("#page2.tsx");
import "@kotan-kndev/re25-0331page1";
  • react_mpa/vite.config.ts
  • entry: ./src/client/page2.tsx に、変更します
    build: {
      lib: {
        entry: ["./src/client/page2.tsx"],
        formats: ['es'],
        fileName: '[name]',
      },
  • SSR追加: /page2
  • routes/page2.ts
export default eventHandler(async (event) => {
  return `<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/static/page2.js"></script>
</body>
</html>
  `;
});
  • page2コンパイル後、server起動
npx vite build && npm run dev
  • localhost:3000/page2 が、React画面表示

page2(react) 追加した参考

knaka Tech-Blogknaka Tech-Blog

Svelte 画面、JSR Package からインポートする例

  • React 環境に、Svelte画面(JSR)を追加する例です
  • 異なる フロントJS種類を、追加する。

構成

  • JSR
  • Nitro Server
  • Svelte
  • npm
  • node 20

svelte package開始

画面単位で、JSR 登録

参考。 svelte

  • src/client/page3.svelte
<script lang="ts">
</script>

<main>
  <div>
    <h1 class="text-3xl font-bold">page3</h1>
    <hr />
    <span><a href="/">[ home ]</a>
    </span>
  </div>
</main>

<style>
</style>
  • src/client/page3.ts
import { mount } from "svelte";
import App from './page3.svelte'

mount(App, { target: document.getElementById('app') });
  • svelte-build
  • vite.config.ts

entry: ./src/client/page3.ts に、変更します

    build: {
      lib: {
        entry: ["./src/client/page3.ts"],
        formats: ['es'],
        fileName: '[name]',
      },


npx vite build
  • public/static/page3.js が出力されます。

JSR package add

  • jsr フォルダ作成（適当な名前）
mkdir sv25-0331page3
cd sv25-0331page3
  • tree
tree .
.
├── jsr.json
└── src
    └── main.js
  • jsr.json
  • name, version は、適宜に変更下さい。
{
  "name": "@kotan-kndev/sv25-0331page3",
  "version": "0.9.1",
  "license": "MIT",
  "exports": "./src/main.js"
}
  • svelte jsファイルコピー

public/static/page3.js を、jsr フォルダ　の、src/main.js　に、コピーします。

  • JSR
npx jsr publish

JSR install

  • 前回記事の、React環境のフォルダに移動します。
  • 例で今回は、page3　を追加したJSRを。react環境にインストールします、
  • 参考のパス
  • /page3 : JSR　install する、svelte 画面
  • package install
npx jsr add @kotan-kndev/sv25-0331page3
  • src/client/page3.tsx
console.log("#page3.tsx");
import "@kotan-kndev/sv25-0331page3";
  • react_mpa/vite.config.ts
  • entry: ./src/client/page3.tsx に、変更します
    build: {
      lib: {
        entry: ["./src/client/page3.tsx"],
        formats: ['es'],
        fileName: '[name]',
      },
  • SSR追加: /page3
  • routes/page3.ts
export default eventHandler(async (event) => {
  return `<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>page3</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/static/page3.js"></script>
</body>
</html>
  `;
});
  • page3コンパイル、server起動
npx vite build && npm run dev
  • localhost:3000/page3 、svelte画面表示(React 環境)

page3(svelte JSR) 追加した参考

knaka Tech-Blogknaka Tech-Blog

Vue 画面、JSR Package からインポートする例

構成

  • JSR
  • Nitro Server
  • Vue
  • npm
  • node 20

React package開始

画面単位で、JSR 登録

参考。 Vue

  • page4 : package するVue
  • pkg/ap2-vue/src/client/page4.vue

取り込む、react環境

  • PKG install
npx jsr add @kotan-kndev/vu-page4-250403
  • react_jsr2/src/client/page4.tsx

https://github.com/kuc-arc-f/nitro_7ex/blob/main/react_jsr2/src/client/page4.tsx

  • SSR追加: /page4
  • react_jsr2/routes/page4.ts

https://github.com/kuc-arc-f/nitro_7ex/blob/main/react_jsr2/routes/page4.ts

  • start
npx vite build && npm run dev

localhost:3000/page4 , Vue 画面

  • 見た目 , vercel deploy
knaka Tech-Blogknaka Tech-Blog

Express + React環境に、JSR Package　インポート

  • nitro+ react使用した、JSRを、expressにインポートする例になります。

構成

  • JSR
  • express　MPA
  • React
  • npm
  • node 20

参考。 express + React

  • CSR追加 page2
  • sample/jsr1/src/client/page2.tsx

https://github.com/kuc-arc-f/express_36react/blob/main/sample/jsr1/src/client/page2.tsx

  • SSR追加
  • sample/jsr1/src/pages/page2.tsx

https://github.com/kuc-arc-f/express_36react/blob/main/sample/jsr1/src/pages/page2.tsx

  • ルーティング追加、express
  • sample/jsr1/src/index.ts

https://github.com/kuc-arc-f/express_36react/blob/main/sample/jsr1/src/index.ts

・JSR 追加

npx jsr add @kotan-kndev/re25-0331page1
  • start
yarn dev
  • localhost:3000/page2 で、　JSR画面表示
knaka Tech-Blogknaka Tech-Blog

Preact.js 画面、JSR Package からインポートする例

構成

  • JSR
  • Nitro Server
  • Preact
  • npm
  • node 20

参考。 Preact環境

取り込む、react環境

  • JSR add
npx jsr add @kotan-kndev/pre-page6-250405
  • CSR 追加
  • react_jsr6/src/client/page6.tsx

https://github.com/kuc-arc-f/nitro_7ex/blob/main/react_jsr6/src/client/page6.tsx

  • SSR追加
  • react_jsr6/routes/page6.ts

https://github.com/kuc-arc-f/nitro_7ex/blob/main/react_jsr6/routes/page6.ts

  • start
npm run prebuild && npm run dev
  • localhost:3000/page6 を開くと、Preact JSR画面表示
knaka Tech-Blogknaka Tech-Blog

タスク管理、JSR + Nitro + フロントJS( Svelte)

  • タスク管理 の、作例になります。
  • electron等の機能を、JSR + Nitro環境に移植

構成

  • JSR
  • Svelte
  • tailwindcss
  • Nitro Server
  • npm
  • node 20
  • d1 + workers

書いたコード

外観

  • タスク一覧

  • 編集

  • ガントチャート、Excel エクスポート

  • start
npm run prebuild && npm run dev
  • package.json
{
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nitro build",
    "build:css": "npx @tailwindcss/cli -i ./src/input.css -o ./public/output.css",
    "dev": "nitro dev",
    "watch": "nodemon",
    "prebuild": "npx vite build && npm run build:css",
    "prepare": "nitro prepare",
    "preview": "node .output/server/index.mjs"
  },
  "dependencies": {
    "@kotan-kndev/ap7-sv-project": "npm:@jsr/kotan-kndev__ap7-sv-project@^0.9.1",
    "@kotan-kndev/ap7-sv-project-create": "npm:@jsr/kotan-kndev__ap7-sv-project-create@^0.9.1",
    "@kotan-kndev/ap7-sv-project-export": "npm:@jsr/kotan-kndev__ap7-sv-project-export@^0.9.1",
    "@kotan-kndev/ap7-sv-project-show": "npm:@jsr/kotan-kndev__ap7-sv-project-show@^0.9.1",
    "@kotan-kndev/ap7-svelte-task-item-create": "npm:@jsr/kotan-kndev__ap7-svelte-task-item-create@^0.9.1",
    "@kotan-kndev/ap7-svelte-task-item-edit": "npm:@jsr/kotan-kndev__ap7-svelte-task-item-edit@^0.9.1",
    "@kotan-kndev/re25-0331page1": "npm:@jsr/kotan-kndev__re25-0331page1@^0.9.5",
    "@kotan-kndev/sv-home-250402": "npm:@jsr/kotan-kndev__sv-home-250402@^0.9.3",
    "@kotan-kndev/sv-login-250403": "npm:@jsr/kotan-kndev__sv-login-250403@^0.9.1",
    "@kotan-kndev/sv-page3-250402": "npm:@jsr/kotan-kndev__sv-page3-250402@^0.9.2",
    "@kotan-kndev/sv25-0331page3": "npm:@jsr/kotan-kndev__sv25-0331page3@^0.9.1",
    "@kotan-kndev/vu-page4-250403": "npm:@jsr/kotan-kndev__vu-page4-250403@^0.9.2",
    "@kotan-kndev/vu25-0402page4": "npm:@jsr/kotan-kndev__vu25-0402page4@^0.9.1",
    "@tailwindcss/cli": "^4.1.1",
    "nodemon": "^3.1.9",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^6.21.2",
    "tailwindcss": "^4.1.1",
    "vite": "^6.2.0",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "nitropack": "latest",
    "vite-tsconfig-paths": "^5.1.4"
  }
}