@d1vij/jassm 0.1.6 → 0.1.7
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 +21 -6
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
# Just another static site maker
|
|
2
2
|
|
|
3
|
-
Create content driven sites using mdx (markdown + react) with added support
|
|
3
|
+
Create content driven sites using mdx (markdown + react) with added support typescript based autocompletion for the pages.
|
|
4
4
|
|
|
5
5
|
## What is this ??
|
|
6
6
|
|
|
7
7
|
JASSM is a simple abstraction layer over [mdx-js](https://mdxjs.com/) and its vite plugin for creating a route/file aware loader for mdx file.
|
|
8
8
|
|
|
9
|
+
Each page is configured at a single source of truth (registry) and thereby provides typesafe access throughout.
|
|
10
|
+
|
|
11
|
+
(ps the DX is similar to that of TanstackRouter or Elysia)
|
|
12
|
+
|
|
9
13
|
## Usage
|
|
10
14
|
|
|
11
15
|
0. Initialize a react app using vite
|
|
@@ -26,7 +30,7 @@ bun add @d1vij/jassm
|
|
|
26
30
|
import { defineConfig } from "vite";
|
|
27
31
|
import react from "@vitejs/plugin-react";
|
|
28
32
|
|
|
29
|
-
import jassm from "jassm/plugin";
|
|
33
|
+
import jassm from "@d1vij/jassm/plugin";
|
|
30
34
|
|
|
31
35
|
export default defineConfig({
|
|
32
36
|
plugins: [
|
|
@@ -49,9 +53,9 @@ echo "# This is a Heading" > sample.mdx
|
|
|
49
53
|
```ts
|
|
50
54
|
// src/Registry.tsx
|
|
51
55
|
|
|
52
|
-
import {
|
|
56
|
+
import { Registry } from "@d1vij/jassm";
|
|
53
57
|
|
|
54
|
-
export const registry =
|
|
58
|
+
export const registry = new Registry({
|
|
55
59
|
modules: import.meta.glob("/src/assets/mdx/**/*.mdx"),
|
|
56
60
|
source: "/src/assets/mdx",
|
|
57
61
|
mountOn: "/root",
|
|
@@ -100,10 +104,20 @@ import {stylesmap} from "./stylesmap";
|
|
|
100
104
|
|
|
101
105
|
import {MDXFromComponent} from "jassm";
|
|
102
106
|
|
|
107
|
+
import {use} from "react";
|
|
108
|
+
|
|
109
|
+
type ExportType = {
|
|
110
|
+
meta: {
|
|
111
|
+
title: string
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
|
|
103
115
|
export default function Content() {
|
|
104
|
-
const Component = registry
|
|
116
|
+
const Component = registry.getComponent("/root/sample");
|
|
117
|
+
const exports = use(registry.getExport<ExportType>("/root/sample")) // consuming the 'import' promise using use
|
|
105
118
|
return (
|
|
106
119
|
<div>
|
|
120
|
+
{exports.meta.title}
|
|
107
121
|
<MDXFromComponent
|
|
108
122
|
SourceComponent={Component}
|
|
109
123
|
styles={stylesmap}
|
|
@@ -121,7 +135,7 @@ Using `MDXSourceComponent` automatically sets up the required enclosing StyleCon
|
|
|
121
135
|
The setup can also be done manually as follows
|
|
122
136
|
|
|
123
137
|
```tsx
|
|
124
|
-
import { StyleContext, Elements } from "jassm";
|
|
138
|
+
import { StyleContext, Elements } from "@d1vij/jassm";
|
|
125
139
|
|
|
126
140
|
import { registry } from "./Registry";
|
|
127
141
|
import { stylesmap } from "./stylesmap";
|
|
@@ -142,3 +156,4 @@ export default function MyLoader() {
|
|
|
142
156
|
);
|
|
143
157
|
}
|
|
144
158
|
```
|
|
159
|
+
---
|
package/dist/index.d.ts
CHANGED
|
@@ -78,9 +78,9 @@ declare function generateRegistries<
|
|
|
78
78
|
/**
|
|
79
79
|
* The returned object has the type of {@link React.ComponentType} + whatever user passes
|
|
80
80
|
*/
|
|
81
|
-
type ExportSingleType<T> = T & {
|
|
81
|
+
type ExportSingleType<T> = Promise<T & {
|
|
82
82
|
default: React.ComponentType;
|
|
83
|
-
}
|
|
83
|
+
}>;
|
|
84
84
|
type ExportAllType<T> = { [K in keyof T] : ExportSingleType<T[K]> };
|
|
85
85
|
/**
|
|
86
86
|
* Wrapper class over {@link generateRegistries}. Provides methods to access components and exports from typesafe keys
|
package/package.json
CHANGED