<script setup lang="ts">
interface Props {
  name: string
}

const props = defineProps<Props>();
</script>

<template>
  <div class="hello-container">
    <p class="hello-message">Hello, {{ props.name }}!!</p>
  </div>
</template>

<style scoped lang="scss">
.hello-container {
  border: 2px solid #3e3e3e;
  border-radius: 2px;
  width: 300px;
  text-align: center;
  margin: 3px;

  .hello-message {
    font-size: 20px;
  }
}
</style>

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  if (mode === "production") {
    return {
      base: "/pnpm-ghactions-ghpages-demo/",
      plugins: [vue()],
    };
  }
  return {
    plugins: [vue()],
  };
});

# Simple workflow for deploying static content to GitHub Pages
name: Deploy

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
          cache: "pnpm"

      - name: Install dependencies
        run: pnpm install

      - run: pnpm build

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload entire repository
          path: "./dist"

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

❯ pnpm create vite@latest
../../.pnpm-store/v3/tmp/dlx-19108       |   +1 +
../../.pnpm-store/v3/tmp/dlx-19108       | Progress: resolved 1, reused 1, downloaded 0, added 1, done
√ Project name: ... ninisan-demo-library
√ Select a framework: » Others
√ Select a variant: » create-vite-extra ↗
../../.pnpm-store/v3/tmp/dlx-16408       |   +6 +
../../.pnpm-store/v3/tmp/dlx-16408       | Progress: resolved 6, reused 6, downloaded 0, added 6, done
√ Select a template: » library
√ Select a variant: » TypeScript

Scaffolding project in D:\programs\ninisan-demo-library...

Done. Now run:

  cd ninisan-demo-library
  pnpm install
  pnpm run dev

import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import { resolve } from "path";

export default defineConfig({
  plugins: [dts()],
  build: {
    lib: {
      entry: resolve(__dirname, "./lib/index.ts"),
      name: "ninisan-demo",
      fileName: "index",
      formats: ["es", "umd"],
    },
  },
});

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    // "noEmit": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["lib"]
}

{
  "name": "ninisan-demo-library",
  "private": false,
  "version": "0.1.0",
  "description": "ninisan's demo npm package",
  "author": "drumath2237",
  "homepage": "https://github.com/drumath2237/ninisan-demo-library",
  "license": "Apache-2.0",
  "keywords": [
    "npm",
    "typescript"
  ],
  "packageManager": "pnpm@8.12.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/drumath2237/ninisan-demo-library"
  },
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "types": "./dist/index.d.ts",
    "import": "./dist/index.js",
    "require": "./dist/index.umd.cjs"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "prepare": "pnpm build"
  },
  "devDependencies": {
    "@types/node": "^20.10.5",
    "typescript": "^5.3.3",
    "vite": "^5.0.10",
    "vite-plugin-dts": "^3.7.0"
  }
}

export const add = (a: number, b: number) => a + b;

export const sayHello = (name: string) => `Hello, ${name}!`;

export * from "./api";

# in npm package dir
pnpm link --global

# in test dir
pnpm link --global ninisan-demo-library

import "./style.css";
import typescriptLogo from "./typescript.svg";
import viteLogo from "/vite.svg";
import { setupCounter } from "./counter.ts";

import { add, sayHello } from "ninisan-demo-library";

const result = add(1, 2);
const msg = sayHello("Bob");

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>1+2=${result}, "${msg}"</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`;

setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);