UI Framework integration about jitar HOT 1 CLOSED

I've managed to create a Vite plugin that works in dev mode, but can build a fully shippable package. To test the plugin follow next steps to create a simple React app. You can also use Vue or Angular if preferred.

Step 1
Register the local version of Jitar and the plugin.

cd path/to/jitar-repo/jitar
tsc
npm link

cd ../plugins/vite
tsc
npm link

step 2
Setup a basic React app with Vite.

cd path/to/some/projects
npm create -y vite@latest jitar-react --template react-ts
cd jitar-react
npm install

Step 3
Add Jitar and the plugin to the app.

npm link jitar jitar-vite-plugin

Add the plugin to the Vite config (project root).

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import jitar from 'jitar-vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), jitar('./src', 'shared', 'http://localhost:3000')]
})

And add a Jitar config file to the root of the project.

jitar.json

{
    "url": "http://127.0.0.1:3000",
    "standalone":
    {
        "source": "./dist",
        "cache": "./cache",
        "index": "index.html"
    }
}

Step 4
Extend the app with an procedure.

First create a shared folder into the src folder, and create a sayHello.ts file in the shared folder with the following content.

export default async function sayHello(name: string): Promise<string>
{
    return `Hello, ${name}!`;
}

Call the procedure from the App react component.

src/App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import sayHello from './shared/sayHello'

const message = await sayHello('Vite + React + Jitar')

function App()
{
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <!-- Only add the message to the heading -->
      <h1>{message}</h1>
      <!-- The rest is left out this example -->
    </div>
  )
}

export default App

And create a segment file for the procedure.

default.segment.json

{
    "./shared/sayHello.js": { "default": { "access": "public" } }
}

Step 5
Running and building.

Create a bootstrap script for Jitar in the src folder.

import { startServer } from 'jitar';

const moduleImporter = async (specifier: string) => import(specifier);

startServer(moduleImporter);

Update the tsconfig file to emit the transpiled code to the dist folder.

{
  "compilerOptions": {
    "...", "...",
    "noEmit": false,
    "outDir": "dist",
    "...", "..."
  },
  "...", "..."
}

Add a script to the package.json to run Jitar, and reverse the build order.

{
  "...": "...",
  "scripts": {
    "dev": "vite",
    "jitar": "node --experimental-network-imports --experimental-fetch dist/jitar.js --config=jitar.json",
    "build": "vite build && tsc",
    "preview": "vite preview"
  },
  "...": "..."
}

The app needs to be build before starting Jitar.

npm run build
npm run jitar

The build app should now be available under http://localhost:3000.

The app can also run in dev mode (in a separate terminal, don't stop Jitar).

npm run dev

The build app should also be available under http://localhost:5173.

from jitar.