JSR Package 登録調査

id: 201, 2025-05-25

### 音声概要

・AIで生成された音声概要になります。

### 概要

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

### 構成

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

登録すると、jsr.io　に表示されます。
https://jsr.io/@kotan-kndev

試しに、別フォルダ等でinstall(jsr add)

npx jsr add @kotan-kndev/add-func

>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

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

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

### 構成

JSR
Nitro Server
React
npm
node 20

### React package開始

画面単位で、JSR 登録

### 参考。 react

https://github.com/kuc-arc-f/nitro_5ex/tree/main/react_mpa

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

成功すると、　https://jsr.io に表示されます。

### 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) 追加した参考

https://github.com/kuc-arc-f/nitro_7ex/tree/main/react_jsr1

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

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

### 構成

JSR
Nitro Server
Svelte
npm
node 20

### svelte package開始

画面単位で、JSR 登録

### 参考。 svelte

https://github.com/kuc-arc-f/nitro_5ex/tree/main/svelte_mpa

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　に、コピーします。

npx jsr publish

成功すると、　https://jsr.io に表示されます。

### 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) 追加した参考

https://github.com/kuc-arc-f/nitro_7ex/tree/main/react_jsr1

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

### 構成

JSR
Nitro Server
Vue
npm
node 20

### React package開始

画面単位で、JSR 登録

### 参考。 Vue

package方法は、上記のsvelteと同様です
https://github.com/kuc-arc-f/nitro_7ex/tree/main/pkg/ap2-vue

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

### 取り込む、react環境

https://github.com/kuc-arc-f/nitro_7ex/tree/main/react_jsr2

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 画面

JSR Package 登録 調査

### 音声概要

### 概要

### 構成

### 関連

### JSR install

### jsr 登録

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

### 構成

### React package開始

### 参考。 react

### JSR package add

### JSR install

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

### 構成

### svelte package開始

### 参考。 svelte

### JSR package add

### JSR install

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

### 構成

### React package開始

### 参考。 Vue

### 取り込む、react環境

JSR Package 登録調査