Merge pull request #73 from koculu/define-component

Define component

Author: koculu

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/)