rask-ui 0.5.1 → 0.6.0

package/README.md

@@ -68,79 +68,24 @@ RASK gives you:
 
 ## Getting Started
 
-### Installation
+The fastest way to get started is using `create-rask-ui`:
 
 ```bash
-npm install rask-ui
+npm create rask-ui my-app
+cd my-app
+npm run dev
 ```
 
-### Vite Setup
-
-RASK uses a custom Vite plugin powered by SWC for optimal JSX transformation. This plugin transforms JSX to Inferno's highly optimized `createVNode` calls and automatically converts function components to RASK's reactive component pattern.
-
-#### 1. Configure Vite
-
-Create or update your `vite.config.ts`:
-
-```ts
-import { defineConfig } from 'vite';
-import { raskPlugin } from 'rask-ui/plugin';
-
-export default defineConfig({
-  plugins: [raskPlugin()],
-});
-```
-
-**Plugin Options:**
-
-```ts
-raskPlugin({
-  // Enable/disable function component transformation
-  // Default: true
-  transformComponents: true,
-
-  // Add imports for Inferno utilities (usually not needed)
-  // Default: false
-  imports: false,
+This will scaffold a new Vite project with RASK UI pre-configured and ready to go. You'll be prompted to choose between TypeScript or JavaScript.
 
-  // Package to import from when transformComponents is enabled
-  // Default: "rask-ui"
-  importSource: "rask-ui",
+### What's Included
 
-  // Define all arguments for createVNode (for debugging)
-  // Default: false
-  defineAllArguments: false,
-})
-```
-
-#### 2. Configure TypeScript
-
-Update your `tsconfig.json`:
-
-```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "rask-ui",
-    "moduleResolution": "bundler",
-    "target": "ES2022",
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"]
-  }
-}
-```
-
-**Key settings:**
-
-- `"jsx": "react-jsx"` - Tells TypeScript to use the new JSX transform for type checking
-- `"jsxImportSource": "rask-ui"` - Points to RASK's JSX runtime for type definitions
-- `"moduleResolution": "bundler"` - Required for Vite
-
-**How it works:**
+The scaffolded project includes:
 
-- **TypeScript**: Type-checks JSX using RASK's type definitions (imported from Inferno)
-- **SWC Plugin**: Transforms JSX to Inferno's `createVNode` calls at build time
-- The result: You get full type safety with zero runtime overhead
+- ✅ Vite configured with the RASK plugin
+- ✅ TypeScript or JavaScript with proper JSX configuration
+- ✅ Hot Module Replacement (HMR) working out of the box
+- ✅ Sample counter component to get you started
 
 ### Basic Example
 
@@ -173,7 +118,7 @@ function MyComponent(props) {
   // SETUP PHASE - Runs once when component is created
   const state = createState({ value: props.initial });
 
-  onMount(() => {
+  createMountEffect(() => {
     console.log("Component mounted!");
   });
 
@@ -614,15 +559,15 @@ function BatchingExample() {
 
 ### Lifecycle Hooks
 
-#### `onMount(callback)`
+#### `createMountEffect(callback)`
 
 Registers a callback to run after the component is mounted to the DOM.
 
 ```tsx
-import { onMount } from "rask-ui";
+import { createMountEffect } from "rask-ui";
 
 function Example() {
-  onMount(() => {
+  createMountEffect(() => {
     console.log("Component mounted!");
   });
 
@@ -641,12 +586,12 @@ function Example() {
 
 ---
 
-#### `onCleanup(callback)`
+#### `createCleanup(callback)`
 
 Registers a callback to run when the component is unmounted.
 
 ```tsx
-import { onCleanup } from "rask-ui";
+import { createCleanup } from "rask-ui";
 
 function Example() {
   const state = createState({ time: Date.now() });
@@ -655,7 +600,7 @@ function Example() {
     state.time = Date.now();
   }, 1000);
 
-  onCleanup(() => {
+  createCleanup(() => {
     clearInterval(interval);
   });
 
@@ -1223,4 +1168,4 @@ MIT
 
 ## Why "RASK"?
 
-The name comes from Norwegian/Swedish meaning "fast" - which captures the essence of this library: fast to write, fast to understand, and fast to run.
+The name comes from Norwegian meaning "fast" - which captures the essence of this library: fast to write, fast to understand, and fast to run.

package/dist/component.d.ts

@@ -1,7 +1,7 @@
 import { VNode, Component, Props } from "inferno";
 export declare function getCurrentComponent(): RaskComponent<any>;
-export declare function onMount(cb: () => void): void;
-export declare function onCleanup(cb: () => void): void;
+export declare function createMountEffect(cb: () => void): void;
+export declare function createCleanup(cb: () => void): void;
 export type RaskFunctionComponent<P extends Props<any>> = (() => () => VNode) | ((props: P) => () => VNode);
 export declare class RaskComponent<P extends Props<any>> extends Component<P> {
     setup: RaskFunctionComponent<P>;

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EAEN,MAAM,SAAS,CAAC;AAQjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAMrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAMvC;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC3D,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IA2D3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAYlC,yBAAyB,IAAI,IAAI;IACjC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAerD,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EAEN,MAAM,SAAS,CAAC;AAQjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,QAM/C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,QAM3C;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC3D,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IA2D3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAYlC,yBAAyB,IAAI,IAAI;IACjC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAerD,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -8,15 +8,15 @@ export function getCurrentComponent() {
     }
     return currentComponent;
 }
-export function onMount(cb) {
+export function createMountEffect(cb) {
     if (!currentComponent) {
-        throw new Error("Only use onCleanup in component setup");
+        throw new Error("Only use createMountEffect in component setup");
     }
     currentComponent.onMounts.push(cb);
 }
-export function onCleanup(cb) {
+export function createCleanup(cb) {
     if (!currentComponent) {
-        throw new Error("Only use onCleanup in component setup");
+        throw new Error("Only use createCleanup in component setup");
     }
     currentComponent.onCleanups.push(cb);
 }

package/dist/createComputed.js

@@ -1,4 +1,4 @@
-import { getCurrentComponent, onCleanup } from "./component";
+import { getCurrentComponent, createCleanup } from "./component";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 export function createComputed(computed) {
     let currentComponent;
@@ -18,7 +18,7 @@ export function createComputed(computed) {
             signal.notify();
         });
         if (currentComponent) {
-            onCleanup(() => computedObserver.dispose());
+            createCleanup(() => computedObserver.dispose());
         }
         Object.defineProperty(proxy, prop, {
             get() {

package/dist/createEffect.js

@@ -1,4 +1,4 @@
-import { getCurrentComponent, onCleanup } from "./component";
+import { getCurrentComponent, createCleanup } from "./component";
 import { Observer } from "./observation";
 export function createEffect(cb) {
     let currentComponent;
@@ -19,7 +19,7 @@ export function createEffect(cb) {
         stopObserving();
     };
     if (currentComponent) {
-        onCleanup(() => observer.dispose());
+        createCleanup(() => observer.dispose());
     }
     runEffect();
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { render } from "./render";
-export { onCleanup, onMount, RaskComponent } from "./component";
+export { createCleanup, createMountEffect, RaskComponent } from "./component";
 export { createContext } from "./createContext";
 export { createState } from "./createState";
 export { createAsync } from "./createAsync";
@@ -11,4 +11,5 @@ export { createView } from "./createView";
 export { createEffect } from "./createEffect";
 export { createComputed } from "./createComputed";
 export { syncBatch } from "./batch";
+export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, } from "inferno";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,GACf,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
 export { render } from "./render";
-export { onCleanup, onMount, RaskComponent } from "./component";
+export { createCleanup, createMountEffect, RaskComponent } from "./component";
 export { createContext } from "./createContext";
 export { createState } from "./createState";
 export { createAsync } from "./createAsync";
@@ -11,3 +11,5 @@ export { createView } from "./createView";
 export { createEffect } from "./createEffect";
 export { createComputed } from "./createComputed";
 export { syncBatch } from "./batch";
+// Re-export Inferno JSX runtime functions so users don't need to install Inferno directly
+export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, } from "inferno";

package/dist/plugin.d.ts

@@ -7,7 +7,7 @@ export interface RaskPluginOptions {
     transformComponents?: boolean;
     /**
      * Import source for Inferno imports
-     * @default false (no imports added)
+     * @default true (imports from rask-ui)
      */
     imports?: boolean;
     /**

package/dist/plugin.js

@@ -8,7 +8,7 @@ const require = createRequire(import.meta.url);
  * Vite plugin for transforming JSX to Inferno and function components to RaskComponent classes
  */
 export function raskPlugin(options = {}) {
-    const { transformComponents = true, imports = false, importSource = 'rask-ui', defineAllArguments = false, } = options;
+    const { transformComponents = true, imports = true, importSource = 'rask-ui', defineAllArguments = false, } = options;
     // Resolve the path to swc-plugin-inferno WASM file
     const infernoPluginPath = require.resolve('swc-plugin-inferno/swc_plugin_inferno.wasm');
     // Resolve the path to our RaskComponent plugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",