@dirwell/theme-authoring 0.0.1-alpha → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -8
- package/package.json +10 -6
package/README.md
CHANGED
|
@@ -1,32 +1,65 @@
|
|
|
1
1
|
# @dirwell/theme-authoring
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Requires Node.js 22.12 or later. [Read the guide](https://vp-tw.github.io/dirwell/themes/#source-component-customization).
|
|
4
|
+
|
|
5
|
+
Compile trusted Svelte/Vue wrapper components
|
|
4
6
|
into matching SSR and browser implementations. Plain and core do not depend on
|
|
5
7
|
this package or its compilers.
|
|
6
8
|
|
|
9
|
+
## Compile and publish a Vue wrapper
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install @dirwell/theme-authoring@0.0.1 @dirwell/theme-crosswave@0.0.1 @dirwell/core@0.0.1
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Create `files/note.txt`. Save this as `Downloads.vue`:
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
<script setup>
|
|
19
|
+
import Crosswave from "@dirwell/theme-crosswave/source";
|
|
20
|
+
defineProps({ model: { type: Object, required: true } });
|
|
21
|
+
</script>
|
|
22
|
+
<template>
|
|
23
|
+
<Crosswave :model="model">
|
|
24
|
+
<template #header="{ model: page }"
|
|
25
|
+
><span>{{ page.title }} · Project downloads</span></template
|
|
26
|
+
>
|
|
27
|
+
</Crosswave>
|
|
28
|
+
</template>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Save this as `build.mjs`, then run `node build.mjs`:
|
|
32
|
+
|
|
7
33
|
```js
|
|
8
34
|
import { buildFrameworkTheme } from "@dirwell/theme-authoring";
|
|
35
|
+
import { generateExplorer } from "@dirwell/core";
|
|
9
36
|
const result = await buildFrameworkTheme({
|
|
10
|
-
framework: "
|
|
11
|
-
component: "./
|
|
37
|
+
framework: "vue",
|
|
38
|
+
component: "./Downloads.vue",
|
|
12
39
|
output: "./generated-theme",
|
|
13
40
|
});
|
|
14
41
|
const { createTheme } = await import(result.themeUrl);
|
|
15
|
-
|
|
42
|
+
await generateExplorer({
|
|
43
|
+
sourceDir: "./files",
|
|
44
|
+
outputDir: "./generated",
|
|
45
|
+
theme: createTheme({ title: "Downloads" }),
|
|
46
|
+
});
|
|
16
47
|
```
|
|
17
48
|
|
|
49
|
+
Serve the complete `generated` folder over HTTP and open its root. Compilation is awaited before importing the matching SSR/client theme. Ledger wrappers use `framework: 'svelte'` and `@dirwell/theme-ledger/source`; install Ledger in place of Crosswave. See the [complete paired source wrappers](https://github.com/vp-tw/dirwell/tree/main/examples/authoring).
|
|
50
|
+
|
|
18
51
|
Import Ledger from `@dirwell/theme-ledger/source`, or Crosswave from
|
|
19
52
|
`@dirwell/theme-crosswave/source`. Your wrapper accepts the `model` prop; public
|
|
20
53
|
model and row context types are available from each theme's `/model` entry.
|
|
21
|
-
Ledger accepts `header`, `row` and `footer` snippets. Crosswave exposes named slots
|
|
22
|
-
with those names. Header/footer receive `{model}`; row
|
|
54
|
+
Ledger accepts `header`, `row`, `actions` and `footer` snippets. Crosswave exposes named slots
|
|
55
|
+
with those names. Header/footer receive `{model}`; row/actions receive
|
|
23
56
|
`{model, entry, selected}`. These contexts track the current directory after
|
|
24
57
|
navigation or live updates. Row content lives inside the official link: do not
|
|
25
|
-
nest links, buttons, or other interactive controls inside it. Official list
|
|
58
|
+
nest links, buttons, or other interactive controls inside it. The separate `actions` region is outside that link and accepts independent interactive controls. Official list
|
|
26
59
|
identity, keyboard selection, link actions, virtualization, pagination, dialogs,
|
|
27
60
|
appearance controls and gamepad lifecycle remain owned by the theme.
|
|
28
61
|
|
|
29
|
-
See
|
|
62
|
+
See the linked source wrappers for complete examples. These are source
|
|
30
63
|
customizations, not serializable CLI options. The output's `theme.mjs#createTheme`
|
|
31
64
|
can be selected with the CLI's existing explicit module-factory argument.
|
|
32
65
|
|
|
@@ -65,3 +98,5 @@ before compilation, so partial editor writes can recover cleanly. Compiler error
|
|
|
65
98
|
produce Vite's overlay and recover after a valid edit. Development CSS loads
|
|
66
99
|
through Vite's client, so production output is the no-JavaScript/CSS acceptance
|
|
67
100
|
path. No Farm watcher is involved.
|
|
101
|
+
|
|
102
|
+
The 0.0.x API may evolve. Pin your qualified version and upgrade the official family together. See [support and verification](https://vp-tw.github.io/dirwell/support/) for host, browser and device boundaries.
|
package/package.json
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dirwell/theme-authoring",
|
|
3
|
-
"version": "0.0.1
|
|
3
|
+
"version": "0.0.1",
|
|
4
4
|
"description": "Paired Svelte/Vue theme compilation and native development HMR.",
|
|
5
|
+
"homepage": "https://vp-tw.github.io/dirwell/themes/#source-component-customization",
|
|
6
|
+
"bugs": {
|
|
7
|
+
"url": "https://github.com/vp-tw/dirwell/issues"
|
|
8
|
+
},
|
|
5
9
|
"license": "MIT",
|
|
6
10
|
"repository": {
|
|
7
11
|
"type": "git",
|
|
@@ -27,13 +31,13 @@
|
|
|
27
31
|
"publishConfig": {
|
|
28
32
|
"access": "public",
|
|
29
33
|
"provenance": true,
|
|
30
|
-
"tag": "
|
|
34
|
+
"tag": "latest"
|
|
31
35
|
},
|
|
32
36
|
"dependencies": {
|
|
33
|
-
"@dirwell/core": "0.0.1
|
|
34
|
-
"@dirwell/server": "0.0.1
|
|
35
|
-
"@dirwell/theme-crosswave": "0.0.1
|
|
36
|
-
"@dirwell/theme-ledger": "0.0.1
|
|
37
|
+
"@dirwell/core": "0.0.1",
|
|
38
|
+
"@dirwell/server": "0.0.1",
|
|
39
|
+
"@dirwell/theme-crosswave": "0.0.1",
|
|
40
|
+
"@dirwell/theme-ledger": "0.0.1",
|
|
37
41
|
"@sveltejs/vite-plugin-svelte": "7.3.1",
|
|
38
42
|
"@vitejs/plugin-vue": "6.0.10",
|
|
39
43
|
"@vue/compiler-sfc": "3.5.43",
|