runafe-threejs

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