prosekit-registry 0.0.2 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prosekit-registry",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "description": "The registry of ProseKit examples",
   "license": "MIT",
@@ -83,8 +83,8 @@
     "vitest-browser-vue": "^2.1.0",
     "vue-tsc": "^3.2.6",
     "vue-tweet": "^2.4.0",
-    "@prosekit/config-vitest": "0.0.0",
     "@prosekit/dev": "0.0.0",
+    "@prosekit/config-vitest": "0.0.0",
     "prosekit": "0.20.0-beta.3"
   },
   "scripts": {

package/README.md

@@ -1,241 +0,0 @@
-# ProseKit Registry
-
-The registry contains framework examples and shared UI components. Source files are organized in `registry/src`, with dedicated directories for each supported framework: `react`, `vue`, `svelte`, `solid`, and `preact`.
-
-## Common Guidelines
-
-### Same DOM Across Frameworks
-
-All framework implementations of the same example must render identical DOM structures.
-
-### No Props Destructuring
-
-Avoid destructuring component props across all frameworks. Destructuring breaks reactivity in frameworks like Solid. Maintaining consistent syntax across frameworks also improves code maintainability.
-
-**Correct:**
-
-```tsx
-function Foo(props: FooProps) {
-  return <div>{props.foo}</div>;
-}
-```
-
-**Incorrect:**
-
-```tsx
-function Foo({ foo }: FooProps) {
-  return <div>{foo}</div>;
-}
-```
-
-### Union Call Convention
-
-The `union` function should be called with individual arguments, not an array.
-
-**Correct:**
-
-```ts
-return union(defineBasicExtension(), defineCodeBlockView());
-```
-
-**Incorrect:**
-
-```ts
-return union([defineBasicExtension(), defineCodeBlockView()]);
-```
-
-### Default Content Location
-
-To provide default content for an example, create a file at `registry/src/<framework>/sample/sample-doc-<example-name>.ts` and export the content using the following format:
-
-```ts
-import type { NodeJSON } from "prosekit/core";
-
-export const sampleContent: NodeJSON = {
-  /* ... */
-};
-```
-
-### 'use client' Directive
-
-Only use the `'use client'` directive in React framework index files. Do not use it in Vue, Svelte, Solid, Preact, or other frameworks as it is specific to React Server Components.
-
-## Vue-Specific Guidelines
-
-### Event Handlers
-
-Use `@event-name` syntax instead of `:on-event-name` for event handlers in Vue templates.
-
-**Good:**
-
-```
-<Component @query-change="handleQueryChange" />
-```
-
-**Bad:**
-
-```
-<Component :on-query-change="handleQueryChange" />
-```
-
-### Props Declaration
-
-Use `const props = defineProps<Props>()` to declare component props. This provides better clarity and consistency with other frameworks' patterns.
-
-**Good:**
-
-```vue
-<script setup lang="ts">
-interface Props {
-  name: string
-  age?: number
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <div>{{ props.name }}</div>
-</template>
-```
-
-**Bad:**
-
-```vue
-<script setup lang="ts">
-interface Props {
-  name: string
-  age?: number
-}
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div>{{ name }}</div>
-</template>
-```
-
-### Side Effects with Cleanup
-
-Prefer `watchEffect` over `watch` to track reactive dependencies automatically.
-
-**Good:**
-
-```ts
-watchEffect((onCleanup) => {
-  const value = valueRef.value;
-  // do something with value
-  onCleanup(() => {
-    // cleanup logic
-  });
-});
-```
-
-**Bad:**
-
-```ts
-watch([valueRef], (newValue, oldValue, onCleanup) => {
-  // do something with newValue
-  onCleanup(() => {
-    // cleanup logic
-  });
-});
-```
-
-## Svelte-Specific Guidelines
-
-### Syntax
-
-Use Svelte v5 runes syntax (`$state`, `$derived`, `$props`, `$effect`) instead of legacy syntax.
-
-**Good:**
-
-```svelte
-<script lang="ts">
-  interface Props {
-    name: string;
-  }
-  const props: Props = $props();
-  let count = $state(0);
-  let doubled = $derived(count * 2);
-</script>
-
-<div>{props.name} {doubled}</div>
-```
-
-**Bad:**
-
-```svelte
-<script lang="ts">
-  export let name = 'World';
-  let count = 0;
-  $: doubled = count * 2;
-</script>
-
-<div>{name} {doubled}</div>
-```
-
-## Solid-Specific Guidelines
-
-### Use `attr:` for data attributes
-
-Use `attr:` for data attributes
-
-**Good:**
-
-```tsx
-<SolidComponent
-  attr:data-testid="test-id"
-  attr:data-selected={selected ? "" : undefined}
-/>
-```
-
-**Bad:**
-
-```tsx
-<SolidComponent
-  data-testid="test-id"
-  data-selected={selected ? "" : undefined}
-/>
-```
-
-### Explicitly specify the return type of components
-
-**Good:**
-
-```tsx
-import type { JSX } from 'solid-js'
-
-export default function Foo(): JSX.Element {
-  return <div>Foo</div>
-}
-```
-
-**Bad:**
-
-```tsx
-export default function Foo() {
-  return <div>Foo</div>
-}
-```
-
-### Use `For` instead of `.map()`
-
-**Good:**
-
-```tsx
-<div> 
-  <For each={items}>
-    {(item) => <div>{item}</div>}
-  </For>
-</div>
-```
-
-**Bad:**
-
-```tsx
-<div>{items.map((item) => (
-  <div>{item}</div>)
-)}</div>
-```