diff --git a/README.md b/README.md index c8fb200..3b6df63 100644 --- a/README.md +++ b/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 @@ -74,7 +74,7 @@ const template = html``; -const Counter = createComponent( +const Counter = defineComponent( template, { context: (head) => ({ initial: head.props.initial, count: ref(head.props.initial()) }), diff --git a/docs-site/src/content/docs/api/createApp.md b/docs-site/src/content/docs/api/createApp.md index fc94540..c39c327 100644 --- a/docs-site/src/content/docs/api/createApp.md +++ b/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) diff --git a/docs-site/src/content/docs/api/createComponent.md b/docs-site/src/content/docs/api/createComponent.md index b5ef4b0..2eb6e1c 100644 --- a/docs-site/src/content/docs/api/createComponent.md +++ b/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`
`, // 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/) - diff --git a/docs-site/src/content/docs/api/index.md b/docs-site/src/content/docs/api/index.md index e7951db..3181df7 100644 --- a/docs-site/src/content/docs/api/index.md +++ b/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) diff --git a/docs-site/src/content/docs/api/onMounted.md b/docs-site/src/content/docs/api/onMounted.md index 62ad255..013b772 100644 --- a/docs-site/src/content/docs/api/onMounted.md +++ b/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`
`, { +const userRow = defineComponent(html`
`, { context: () => ({ // Register an onMounted callback onMounted(() => { diff --git a/docs-site/src/content/docs/api/onUnmounted.md b/docs-site/src/content/docs/api/onUnmounted.md index fe6c52b..d83ae3b 100644 --- a/docs-site/src/content/docs/api/onUnmounted.md +++ b/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`
`, { +const userRow = defineComponent(html`
`, { context: () => ({ // Register an onUnmounted callback onUnmounted(() => { diff --git a/docs-site/src/content/docs/api/regorConfig.md b/docs-site/src/content/docs/api/regorConfig.md index accf025..884d500 100644 --- a/docs-site/src/content/docs/api/regorConfig.md +++ b/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) diff --git a/docs-site/src/content/docs/api/toFragment.md b/docs-site/src/content/docs/api/toFragment.md index ef6adff..7190ec4 100644 --- a/docs-site/src/content/docs/api/toFragment.md +++ b/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/) diff --git a/docs-site/src/content/docs/api/toJsonTemplate.md b/docs-site/src/content/docs/api/toJsonTemplate.md index 9b0229b..5e6bf94 100644 --- a/docs-site/src/content/docs/api/toJsonTemplate.md +++ b/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/) diff --git a/docs-site/src/content/docs/api/useScope.md b/docs-site/src/content/docs/api/useScope.md index a2f6442..94843a4 100644 --- a/docs-site/src/content/docs/api/useScope.md +++ b/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`
`, { +const userRow = defineComponent(html`
`, { context: () => ({ // Register an onUnmounted callback onUnmounted(() => { diff --git a/docs-site/src/content/docs/directives/context.md b/docs-site/src/content/docs/directives/context.md index 246bf6b..e45a73f 100644 --- a/docs-site/src/content/docs/directives/context.md +++ b/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('
...
', { +const UserCard = defineComponent('
...
', { props: ['userId'], context: (head) => ({ userId: head.props.userId, diff --git a/docs-site/src/content/docs/directives/index.md b/docs-site/src/content/docs/directives/index.md index f1d3b34..ad55fed 100644 --- a/docs-site/src/content/docs/directives/index.md +++ b/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) diff --git a/docs-site/src/content/docs/directives/r-bind.md b/docs-site/src/content/docs/directives/r-bind.md index ca68549..43ae0a0 100644 --- a/docs-site/src/content/docs/directives/r-bind.md +++ b/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) diff --git a/docs-site/src/content/docs/directives/r-for.md b/docs-site/src/content/docs/directives/r-for.md index 84d1096..9cf43ef 100644 --- a/docs-site/src/content/docs/directives/r-for.md +++ b/docs-site/src/content/docs/directives/r-for.md @@ -37,9 +37,7 @@ Object iteration is supported: Destructuring is supported: ```html -
  • - {{ i }} - {{ name }} ({{ age }}) -
    • +
  • {{ i }} - {{ name }} ({{ age }})
    • ``` ## Complex Expressions @@ -81,11 +79,11 @@ If keys are unstable, DOM reuse quality degrades and updates become less predict ``` ```ts -const tableCell = createComponent(html`{{ value }}`, { +const tableCell = defineComponent(html`{{ value }}`, { props: ['value'], }) -const tableRow = createComponent( +const tableRow = defineComponent( html` @@ -103,6 +101,6 @@ const tableRow = createComponent( ## See Also -1. [r-if](./r-if) -2. [r-bind](./r-bind) -3. [r-text](./r-text) +1. [r-if](/directives/r-if) +2. [r-bind](/directives/r-bind) +3. [r-text](/directives/r-text) diff --git a/docs-site/src/content/docs/directives/r-text.md b/docs-site/src/content/docs/directives/r-text.md index 7f89174..c53e414 100644 --- a/docs-site/src/content/docs/directives/r-text.md +++ b/docs-site/src/content/docs/directives/r-text.md @@ -38,7 +38,7 @@ Both are valid. Prefer `r-text` when: 1. `r-text` writes plain text, not HTML. 2. HTML tags in values are escaped as text. -3. Use [`r-html`](./r-html) only when you intentionally need HTML rendering. +3. Use [`r-html`](/directives/r-html) only when you intentionally need HTML rendering. ## Common Patterns @@ -53,6 +53,6 @@ This is a clear and performant default for list text output. ## See Also -1. [r-bind](./r-bind) -2. [r-html](./r-html) -3. [r-for](./r-for) +1. [r-bind](/directives/r-bind) +2. [r-html](/directives/r-html) +3. [r-for](/directives/r-for) diff --git a/docs-site/src/content/docs/getting-started.md b/docs-site/src/content/docs/getting-started.md index 1d110ea..9a42729 100644 --- a/docs-site/src/content/docs/getting-started.md +++ b/docs-site/src/content/docs/getting-started.md @@ -53,7 +53,10 @@ const app = createApp( ```html