القائمة
SolidJS advanced JSX attributes: @once for static values, attr:*/bool:*/prop:* for Web Components, textContent for text nodes, innerHTML for raw HTML.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
SolidJS advanced components: SuspenseList for coordinating multiple Suspense boundaries, NoHydration for skipping hydration of static content.
SolidJS advanced utilities: createRoot for manual disposal, createUniqueId for SSR-safe IDs, useTransition for batching async updates, observable for RxJS interop, modifyMutable for batch updates.
SolidJS control flow: Show for conditionals, Switch/Match for multiple conditions, For/Index for lists, Dynamic for dynamic components, Suspense for async data.
SolidJS lifecycle: onMount for DOM access after mount, onCleanup for resource disposal, effect lifecycle management, component vs effect cleanup.
Core SolidJS primitives: signals use getter functions count(), components run once (no re-renders), effects track automatically, stores use direct property access, memos for computed values. Fine-grained reactivity means targeted DOM updates.
SolidJS rendering: render for client apps, hydrate for SSR, renderToString for server rendering, renderToStream for streaming, isServer checks.
| name | solid-core-jsx-attributes |
| description | SolidJS advanced JSX attributes: @once for static values, attr:*/bool:*/prop:* for Web Components, textContent for text nodes, innerHTML for raw HTML. |
Compiler directive to prevent reactive wrapping for static values. Reduces overhead for values that never change.
<MyComponent static={/*@once*/ state.wontUpdate} />
Works on children too:
<MyComponent>{/*@once*/ state.wontUpdate}</MyComponent>
When to use:
Forces prop to be treated as an HTML attribute instead of a property. Essential for Web Components.
<my-element attr:status={props.status} />
Use case: Web Components where you need to set attributes (not properties).
Note: Type definitions required when using TypeScript.
Controls presence of attribute based on truthy/falsy value. Most useful for Web Components.
<my-element bool:status={prop.value} />
When prop.value is truthy:
<my-element status />
When falsy:
<my-element />
Use case: Conditional attributes for Web Components.
Note: Type definitions required when using TypeScript.
Forces prop to be treated as a DOM property instead of an attribute. For properties like scrollTop.
<div prop:scrollTop={props.scrollPos} />
Use case: Setting DOM properties directly (e.g., scrollTop, custom properties).
Note: Type definitions required when using TypeScript.
Sets the text content of an element. Replaces all child nodes with a single text node.
<div textContent={message()} />
Warning: This replaces all children. Use carefully.
Sets the HTML content directly. Dangerous - use only with sanitized content.
<div innerHTML={sanitizedHtml()} />
Security warning:
textContent or structured JSX@once for truly static values to optimize performanceattr:*, bool:*, prop:* for Web Components integrationtextContent only when you need to replace all childreninnerHTML unless absolutely necessary and content is sanitized