README

Features

It is recommended to use jsx to develop components, If you want to develop with .vue

do change with pacckage.json:

"scripts": {
-  "prepublishOnly": "npm run build",
+  "prepublishOnly": "npm run build:vite",
},

• 💻 Vue suport >=3.2.0

• ✈️ Project init with vite

• 📦 Support cjs & esm

• 🛎 you can write componet with .vue or .tsx

• 🪖 Github Actions support (Auto CI on pull_request / Auto Release on push tag / Auto Deploy on push & pull_request)

• 🍕 Build npm package with tsup

• 🍭 Built-in Vue3 dev environment

  playground folder

  start --> npm run dev

• 🍔 Use browserslistrc

• 🪗 Build styles with postcss (postcss-nested/ autoprefixer / cssnano)

• 🌭 Stylelint that helps you avoid errors and enforce conventions in your styles.

• 🍟 Mono repo with npm

• 🎉 TypeScript, of course

• 🎄 Unit Testing with Vitest

• 🏑 Storybook for building UI components and pages

• 🧆 ESLint statically analyzes your code to quickly find problems.

• ⚒ Husky & lint-staged

• ☕ Commitlint that helps your team adhering to a commit convention

• 🛸 Deploy Storybook on Netlify ---> config

• 🥳 MIT License

how to use

replace runafe-threejs with your package name

Directory structure

Project
├── __tests__           # Unit Testing
├── babel.config.js     # babel config
├── package.json
├── playground          # dev environment folder (can use source code)
│   ├── index.html
│   ├── package.json
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── vite-env.d.ts
│   └── vite.config.ts
├── postcss.config.js  # build styles with postcss
├── global.d.ts # global componet type declaration (TIPS: Manual maintenance is required)
├── src                # Package source code
│   ├── index.ts       # Package source entry
│   ├── stories        # storybook for building UI components and pages
│   ├── styles         # styles for Package
│   └── types.ts       # ts type declaration for Package
├── tsconfig.json      # ts config
└── tsup.config.ts     # build package with tsup

Register Components Globally

// main.ts
import InstallPlugin from 'runafe-threejs';

app.use(InstallPlugin());

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "runafe-threejs/global"
    ]
  }
}

runa-threejs