Define component

README.md

@@ -62,7 +62,7 @@ HTML:
 Defining component:
 
 ```ts
-import { createApp, createComponent, ref, html, type Ref } from 'regor'
+import { createApp, defineComponent, ref, html, type Ref } from 'regor'
 
 interface MyComponent {
   message: Ref<string>
@@ -74,7 +74,7 @@ const template = html`<button @click="count++">
 
 const props = ['message']
 
-const myComponent = createComponent<MyComponent>(template, {
+const myComponent = defineComponent<MyComponent>(template, {
   context: (head) => ({
     message: head.props.message,
     count: ref(0),
@@ -120,7 +120,7 @@ Example:
 ```
 
 ```ts
-const tableRow = createComponent(
+const tableRow = defineComponent(
   html`<tr>
     <TableCell :value="row.name" />
     <TableCell :value="row.age" />
@@ -222,7 +222,7 @@ These directives empower you to create dynamic and interactive user interfaces,
 **App / Component Template Functions**
 
 - **`createApp`** Similar to Vue's `createApp`, it initializes a Regor application instance.
-- **`createComponent`** Creates a Regor component instance.
+- **`defineComponent`** Creates a Regor component instance.
 - **`toFragment`** Converts a JSON template to a document fragment.
 - **`toJsonTemplate`** Converts a DOM element to a JSON template.
 

docs-site/public/sample.html

@@ -72,11 +72,11 @@ <h1>Regor Counter App Demo</h1>
     <!-- TypeScript example tab -->
     <div class="tab-content" :class="{ active: activeTab === 'ts' }">
       <pre><code class="language-typescript">// example.ts
-import { createApp, createComponent, ref, html, type Ref } from 'regor';
+import { createApp, defineComponent, ref, html, type Ref } from 'regor';
 
 interface CounterProps { initial: Ref<number>; }
 const template = html`<button @click=\"count++\">{{ count }} (initial: {{ initial }})</button>`;
-const Counter = createComponent<CounterProps>(
+const Counter = defineComponent<CounterProps>(
   template,
   {
     context: (head) => ({ initial: head.props.initial, count: ref(head.props.initial()) }),

docs-site/src/content/docs/api/createApp.md

@@ -73,7 +73,7 @@ The `createApp` function returns an object with the following properties:
 
 ## See Also
 
-- [`createComponent`](/api/createComponent)
+- [`defineComponent`](/api/defineComponent)
 - [`toFragment`](/api/toFragment)
 - [`toJsonTemplate`](/api/toJsonTemplate)
 

docs-site/src/content/docs/api/createComponent.md

@@ -1,16 +1,16 @@
 ---
-title: createComponent
+title: defineComponent
 ---
 
 ## Overview
 
-The `createComponent` function is used to create a Regor component, which encapsulates a part of your user interface (UI) with its own behavior and template. Components allow you to build complex UIs by composing smaller, reusable units.
+The `defineComponent` function is used to create a Regor component, which encapsulates a part of your user interface (UI) with its own behavior and template. Components allow you to build complex UIs by composing smaller, reusable units.
 
 ## Usage
 
 ### Creating a Regor Component
 
-To create a Regor component, call the `createComponent` function with the following parameters:
+To create a Regor component, call the `defineComponent` function with the following parameters:
 
 - `template` (required): An HTML string or an object specifying the template for rendering the component. It can include the following properties:
 
@@ -30,10 +30,10 @@ To create a Regor component, call the `createComponent` function with the follow
 ### Example
 
 ```ts
-import { createComponent, createApp, html } from 'regor'
+import { defineComponent, createApp, html } from 'regor'
 
 // Define a Regor component
-const myComponent = createComponent(
+const myComponent = defineComponent(
   html`<div></div>`, // Define the component content from html string
   {
     context: (head) => ({
@@ -57,7 +57,7 @@ createApp({
 
 ## Return Value
 
-The `createComponent` function returns a component object with the following properties:
+The `defineComponent` function returns a component object with the following properties:
 
 - `context`: The Regor context associated with the component. It defines the component's behavior, data, and reactivity.
 
@@ -94,4 +94,3 @@ The `createComponent` function returns a component object with the following pro
 - [`toJsonTemplate`](/api/toJsonTemplate)
 
 [Back to the API list](/api/)
-

docs-site/src/content/docs/api/index.md

@@ -10,75 +10,75 @@ Use this page as an index, then open each API page for signature details and exa
 
 ## App and Components
 
-1. [`createApp`](./createApp)
-2. [`createComponent`](./createComponent)
-3. [`toFragment`](./toFragment)
-4. [`toJsonTemplate`](./toJsonTemplate)
-5. [`RegorConfig`](./regorConfig)
+1. [`createApp`](/api/createApp)
+2. [`defineComponent`](/api/defineComponent)
+3. [`toFragment`](/api/toFragment)
+4. [`toJsonTemplate`](/api/toJsonTemplate)
+5. [`RegorConfig`](/api/regorConfig)
 
 ## Reactivity
 
-1. [`ref`](./ref)
-2. [`sref`](./sref)
-3. [`isRef`](./isRef)
-4. [`isDeepRef`](./isDeepRef)
-5. [`unref`](./unref)
-6. [`pause`](./pause)
-7. [`resume`](./resume)
-8. [`trigger`](./trigger)
-9. [`entangle`](./entangle)
+1. [`ref`](/api/ref)
+2. [`sref`](/api/sref)
+3. [`isRef`](/api/isRef)
+4. [`isDeepRef`](/api/isDeepRef)
+5. [`unref`](/api/unref)
+6. [`pause`](/api/pause)
+7. [`resume`](/api/resume)
+8. [`trigger`](/api/trigger)
+9. [`entangle`](/api/entangle)
 
 ## Computed and Effects
 
-1. [`computed`](./computed)
-2. [`computeRef`](./computeRef)
-3. [`computeMany`](./computeMany)
-4. [`watchEffect`](./watchEffect)
-5. [`collectRefs`](./collectRefs)
-6. [`silence`](./silence)
+1. [`computed`](/api/computed)
+2. [`computeRef`](/api/computeRef)
+3. [`computeMany`](/api/computeMany)
+4. [`watchEffect`](/api/watchEffect)
+5. [`collectRefs`](/api/collectRefs)
+6. [`silence`](/api/silence)
 
 ## Observation and Batch
 
-1. [`observe`](./observe)
-2. [`observeMany`](./observeMany)
-3. [`observerCount`](./observerCount)
-4. [`batch`](./batch)
-5. [`startBatch`](./startBatch)
-6. [`endBatch`](./endBatch)
+1. [`observe`](/api/observe)
+2. [`observeMany`](/api/observeMany)
+3. [`observerCount`](/api/observerCount)
+4. [`batch`](/api/batch)
+5. [`startBatch`](/api/startBatch)
+6. [`endBatch`](/api/endBatch)
 
 ## Lifecycle and Scope
 
-1. [`useScope`](./useScope)
-2. [`onMounted`](./onMounted)
-3. [`onUnmounted`](./onUnmounted)
+1. [`useScope`](/api/useScope)
+2. [`onMounted`](/api/onMounted)
+3. [`onUnmounted`](/api/onUnmounted)
 
 ## Cleanup and Unbind
 
-1. [`addUnbinder`](./addUnbinder)
-2. [`getBindData`](./getBindData)
-3. [`removeNode`](./removeNode)
-4. [`unbind`](./unbind)
-5. [`drainUnbind`](./drainUnbind)
+1. [`addUnbinder`](/api/addUnbinder)
+2. [`getBindData`](/api/getBindData)
+3. [`removeNode`](/api/removeNode)
+4. [`unbind`](/api/unbind)
+5. [`drainUnbind`](/api/drainUnbind)
 
 ## Utilities
 
-1. [`flatten`](./flatten)
-2. [`markRaw`](./markRaw)
-3. [`isRaw`](./isRaw)
-4. [`persist`](./persist)
-5. [`html`](./html)
-6. [`raw`](./raw)
+1. [`flatten`](/api/flatten)
+2. [`markRaw`](/api/markRaw)
+3. [`isRaw`](/api/isRaw)
+4. [`persist`](/api/persist)
+5. [`html`](/api/html)
+6. [`raw`](/api/raw)
 
 ## Logging
 
-1. [`warningHandler`](./warningHandler)
+1. [`warningHandler`](/api/warningHandler)
 
 ## Recommendation
 
 Start with:
 
-1. [`createApp`](./createApp)
-2. [`ref`](./ref)
-3. [`sref`](./sref)
-4. [`computed`](./computed)
-5. [`watchEffect`](./watchEffect)
+1. [`createApp`](/api/createApp)
+2. [`ref`](/api/ref)
+3. [`sref`](/api/sref)
+4. [`computed`](/api/computed)
+5. [`watchEffect`](/api/watchEffect)

docs-site/src/content/docs/api/onMounted.md

@@ -13,9 +13,9 @@ The `onMounted` function allows you to register a callback function that will be
 To register an `onMounted` callback, simply call the `onMounted` function and pass the desired callback function as an argument. The callback will be executed when the app or component is mounted.
 
 ```ts
-import { createApp, createComponent, html, useScope, onMounted } from 'regor'
+import { createApp, defineComponent, html, useScope, onMounted } from 'regor'
 
-const userRow = createComponent(html`<div></div>`, {
+const userRow = defineComponent(html`<div></div>`, {
   context: () => ({
     // Register an onMounted callback
     onMounted(() => {

docs-site/src/content/docs/api/onUnmounted.md

@@ -13,9 +13,9 @@ The `onUnmounted` function allows you to register a callback function that will
 To register an `onUnmounted` callback, simply call the `onUnmounted` function and pass the desired callback function as an argument. The callback will be executed when the component or scope is unmounted or cleaned up.
 
 ```ts
-import { createApp, createComponent, html, useScope, onUnmounted } from 'regor'
+import { createApp, defineComponent, html, useScope, onUnmounted } from 'regor'
 
-const userRow = createComponent(html`<div></div>`, {
+const userRow = defineComponent(html`<div></div>`, {
   context: () => ({
     // Register an onUnmounted callback
     onUnmounted(() => {

docs-site/src/content/docs/api/regorConfig.md

@@ -132,7 +132,7 @@ The `RegorConfig` class provides default configuration values for various proper
 ## See Also
 
 - [`createApp`](/api/createApp)
-- [`createComponent`](/api/createComponent)
+- [`defineComponent`](/api/defineComponent)
 - [`toFragment`](/api/toFragment)
 - [`toJsonTemplate`](/api/toJsonTemplate)
 

docs-site/src/content/docs/api/toFragment.md

@@ -70,6 +70,6 @@ The `toFragment` function returns a `DocumentFragment` containing the elements c
 
 - [`toJsonTemplate`](/api/toJsonTemplate)
 - [`createApp`](/api/createApp)
-- [`createComponent`](/api/createComponent)
+- [`defineComponent`](/api/defineComponent)
 
 [Back to the API list](/api/)

docs-site/src/content/docs/api/toJsonTemplate.md

@@ -65,6 +65,6 @@ The `toJsonTemplate` function returns a JSON structure that represents the HTML
 
 - [`toFragment`](/api/toFragment)
 - [`createApp`](/api/createApp)
-- [`createComponent`](/api/createComponent)
+- [`defineComponent`](/api/defineComponent)
 
 [Back to the API list](/api/)

docs-site/src/content/docs/api/useScope.md

@@ -6,7 +6,7 @@ title: useScope
 
 The `useScope` function allows you to create a scope for an app or composable, enabling you to manage initialization and cleanup tasks specific to that scope. Scopes are useful for organizing and encapsulating logic within your components.
 
-Components are always created in scope using `createComponent` function.
+Components are always created in scope using `defineComponent` function.
 
 ## Usage
 
@@ -16,9 +16,9 @@ To create a scope for an app or composable, call the `useScope` function and pas
 
 ```ts
 
-import { createApp, createComponent, html, useScope, onUnmounted, ref, computed, watchEffect } from 'regor'
+import { createApp, defineComponent, html, useScope, onUnmounted, ref, computed, watchEffect } from 'regor'
 
-const userRow = createComponent(html`<div></div>`, {
+const userRow = defineComponent(html`<div></div>`, {
   context: () => ({
     // Register an onUnmounted callback
     onUnmounted(() => {

docs-site/src/content/docs/directives/context.md

@@ -36,7 +36,7 @@ Use object-form attribute binding (`r-bind="{...}"` or `:="{...}"`) for normal h
 ```
 
 ```ts
-const UserCard = createComponent('<section>...</section>', {
+const UserCard = defineComponent('<section>...</section>', {
   props: ['userId'],
   context: (head) => ({
     userId: head.props.userId,

docs-site/src/content/docs/directives/index.md

@@ -17,27 +17,27 @@ By default, directive names start with `r-`. You can customize the prefix with `
 
 ## Binding
 
-1. [`r-text`](./r-text): text content binding.
-2. [`r-html`](./r-html): HTML content binding.
-3. [`r-bind`](./r-bind): attributes/properties/object binding.
-4. [`r-model`](./r-model): form two-way binding.
-5. [`r-on`](./r-on): event binding.
-6. [`r-show`](./r-show): conditional visibility.
-7. [`:class`](./class): dynamic class binding.
-8. [`:style`](./style): dynamic style binding.
+1. [`r-text`](/directives/r-text): text content binding.
+2. [`r-html`](/directives/r-html): HTML content binding.
+3. [`r-bind`](/directives/r-bind): attributes/properties/object binding.
+4. [`r-model`](/directives/r-model): form two-way binding.
+5. [`r-on`](/directives/r-on): event binding.
+6. [`r-show`](/directives/r-show): conditional visibility.
+7. [`:class`](/directives/class): dynamic class binding.
+8. [`:style`](/directives/style): dynamic style binding.
 
 ## Control Flow
 
-1. [`r-if`](./r-if), `r-else-if`, `r-else`: conditional branches.
-2. [`r-for`](./r-for): list/object iteration with keying support.
+1. [`r-if`](/directives/r-if), `r-else-if`, `r-else`: conditional branches.
+2. [`r-for`](/directives/r-for): list/object iteration with keying support.
 
 ## Component and Utility
 
-1. [`:is`](./is): dynamic component selection.
-2. [`:context`](./context): component prop object binding.
-3. [`:ref`](./ref): element/component references.
-4. [`r-pre`](./r-pre): skip compilation for subtree.
-5. [`r-teleport`](./r-teleport): move DOM subtree to another target.
+1. [`:is`](/directives/is): dynamic component selection.
+2. [`:context`](/directives/context): component prop object binding.
+3. [`:ref`](/directives/ref): element/component references.
+4. [`r-pre`](/directives/r-pre): skip compilation for subtree.
+5. [`r-teleport`](/directives/r-teleport): move DOM subtree to another target.
 
 ## Important Keying Note
 
@@ -49,8 +49,8 @@ Use stable keys whenever list identity matters.
 
 Read in this order:
 
-1. [`r-bind`](./r-bind)
-2. [`r-text`](./r-text)
-3. [`r-if`](./r-if)
-4. [`r-for`](./r-for)
-5. [`r-model`](./r-model)
+1. [`r-bind`](/directives/r-bind)
+2. [`r-text`](/directives/r-text)
+3. [`r-if`](/directives/r-if)
+4. [`r-for`](/directives/r-for)
+5. [`r-model`](/directives/r-model)

docs-site/src/content/docs/directives/r-bind.md

@@ -60,7 +60,7 @@ When dynamic **attribute** key changes, previous attribute is removed and new at
 
 1. Attribute path handles boolean attributes and `xlink:*` attributes.
 2. For DOM properties (`value`, `checked`, `innerHTML`, etc.), use `.` shorthand or `.prop`.
-3. For component prop-object assignment, use [`:context`](./context), not `r-bind="{...}"`.
+3. For component prop-object assignment, use [`:context`](/directives/context), not `r-bind="{...}"`.
 
 ## Example
 
@@ -72,9 +72,9 @@ When dynamic **attribute** key changes, previous attribute is removed and new at
 
 ## See Also
 
-1. [r-text](./r-text)
-2. [r-model](./r-model)
-3. [r-on](./r-on)
-4. [r-for](./r-for)
+1. [r-text](/directives/r-text)
+2. [r-model](/directives/r-model)
+3. [r-on](/directives/r-on)
+4. [r-for](/directives/r-for)