Quick Start #

Overview #

Jwc.js is a JavaScript framework for using JSX to write web components on the web. It includes:

• Runtime: A package for creating and rendering web components, it uses Virtual DOM and Diff to update the DOM efficiently.
• Reactivity: A package for creating reactive data bindings, it uses Proxy to track changes.
• Core: A package for creating and defining custom elements, it uses Custom Elements to define custom elements.

The goal of Jwc is to provide a simple, lightweight, and performant way to write web components.

You can find more information about Jwc in the What is Jwc? section.

Scaffolding Your First jwc.js Project #

We provide a CLI tool to help you get started with jwc.js. It is called create-jwcjs, and you can use it to create a new template project with a single command:

npm init jwcjs@latest

yarn create jwcjs@latest

pnpm create jwcjs@latest

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + TypeScript + Jwc.js project, run:

npm init jwcjs@latest <project-name> --template starter-vite-ts

npm init jwcjs@latest <project-name> -- --template starter-vite-ts

yarn create jwcjs@latest <project-name> --template starter-vite-ts

pnpm create jwcjs@latest <project-name> --template starter-vite-ts

Our Templates #

We provide a few templates to help you get started with jwc.js. You can use them as a starting point for your project.

You should see something similar to the following:

✔ Project name: … my-jwc-app
✔ Select a template: › Starter (Vite + TypeScript)
✔ Select a package manager: › pnpm
✔ Created project in /<path>/my-jwc-app.
✔ To get started:
  cd my-jwc-app
  pnpm install
  pnpm run dev

Once the project is created, follow the instructions to install dependencies and start the dev server:

cd <project-name>
npm install
npm run dev

cd <project-name>
yarn
yarn dev

cd <project-name>
pnpm install
pnpm dev

You should now have your Jwc project running! When you are ready to deploy, use the build command:

npm run build

yarn build

pnpm build

This will create a js file in the dist directory. You can use it in your project like this:

<script src="/dist/index.js"></script>

<app-element count="1" ></app-element>

Install jwcjs in an Existing Project #

You can use npm, yarn or pnpm to install jwcjs. We recommend using pnpm, it is faster and more efficient.

You can install it with the following command:

npm install jwcjs

yarn add jwcjs

pnpm add jwcjs

Then, configure your tsconfig.json file to use the JSX factory and fragment factory:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

These commands will install jwcjs. You can use Vite, Rollup, Webpack, or any other build tool to build your project.