@wuchale/jsx 0.10.0 → 0.10.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/dist/index.d.ts +2 -2
- package/dist/index.js +16 -16
- package/dist/runtime.solid.jsx +4 -4
- package/dist/transformer.d.ts +3 -6
- package/dist/transformer.js +15 -55
- package/package.json +2 -2
- package/src/loaders/react.bundle.js +8 -3
- package/src/loaders/react.js +6 -4
- package/src/loaders/solidjs.bundle.js +3 -3
- package/src/loaders/solidjs.js +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import { type JSXLib } from
|
|
1
|
+
import type { Adapter, AdapterArgs, CreateHeuristicOpts, HeuristicFunc, LoaderChoice } from 'wuchale';
|
|
2
|
+
import { type JSXLib } from './transformer.js';
|
|
3
3
|
export declare function createJsxHeuristic(opts: CreateHeuristicOpts): HeuristicFunc;
|
|
4
4
|
export declare const jsxDefaultHeuristic: HeuristicFunc;
|
|
5
5
|
type LoadersAvailable = 'default' | 'react' | 'solidjs';
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { pluralPattern, getDefaultLoaderPath as getDefaultLoaderPathVanilla } from 'wuchale/adapter-vanilla';
|
|
3
|
-
import { JSXTransformer } from "./transformer.js";
|
|
1
|
+
import { createHeuristic, deepMergeObjects, defaultGenerateLoadID, defaultHeuristicOpts } from 'wuchale';
|
|
4
2
|
import { loaderPathResolver } from 'wuchale/adapter-utils';
|
|
3
|
+
import { getDefaultLoaderPath as getDefaultLoaderPathVanilla, pluralPattern } from 'wuchale/adapter-vanilla';
|
|
4
|
+
import { JSXTransformer } from './transformer.js';
|
|
5
5
|
export function createJsxHeuristic(opts) {
|
|
6
6
|
const defaultHeuristic = createHeuristic(opts);
|
|
7
|
-
return msg => {
|
|
7
|
+
return (msg) => {
|
|
8
8
|
const defRes = defaultHeuristic(msg);
|
|
9
9
|
if (!defRes) {
|
|
10
10
|
return false;
|
|
@@ -25,26 +25,26 @@ const defaultRuntime = {
|
|
|
25
25
|
const insideReactive = !inTopLevel && !nested && ((funcName.startsWith('use') && funcName.length > 3) || /[A-Z]/.test(funcName[0]));
|
|
26
26
|
return inTopLevel ? null : insideReactive;
|
|
27
27
|
},
|
|
28
|
-
useReactive: ({ funcName, nested }) => funcName != null
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
useReactive: ({ funcName, nested }) => funcName != null &&
|
|
29
|
+
!nested &&
|
|
30
|
+
((funcName.startsWith('use') && funcName.length > 3) || /[A-Z]/.test(funcName[0])),
|
|
31
31
|
reactive: {
|
|
32
|
-
wrapInit: expr => expr,
|
|
33
|
-
wrapUse: expr => expr,
|
|
32
|
+
wrapInit: (expr) => expr,
|
|
33
|
+
wrapUse: (expr) => expr,
|
|
34
34
|
},
|
|
35
35
|
plain: {
|
|
36
|
-
wrapInit: expr => expr,
|
|
37
|
-
wrapUse: expr => expr,
|
|
36
|
+
wrapInit: (expr) => expr,
|
|
37
|
+
wrapUse: (expr) => expr,
|
|
38
38
|
},
|
|
39
39
|
};
|
|
40
40
|
const defaultRuntimeSolid = {
|
|
41
41
|
...defaultRuntime,
|
|
42
|
-
initReactive: ({ funcName }) => funcName == null ? true : null, // init only in top level
|
|
42
|
+
initReactive: ({ funcName }) => (funcName == null ? true : null), // init only in top level
|
|
43
43
|
useReactive: true, // always reactive, because solidjs doesn't have a problem with it
|
|
44
44
|
reactive: {
|
|
45
|
-
wrapInit: expr => `() => ${expr}`,
|
|
46
|
-
wrapUse: expr => `${expr}()
|
|
47
|
-
}
|
|
45
|
+
wrapInit: (expr) => `() => ${expr}`,
|
|
46
|
+
wrapUse: (expr) => `${expr}()`,
|
|
47
|
+
},
|
|
48
48
|
};
|
|
49
49
|
const defaultArgs = {
|
|
50
50
|
files: { include: 'src/**/*.{js,ts,jsx,tsx}', ignore: '**/*.d.ts' },
|
|
@@ -84,7 +84,7 @@ export const adapter = (args = defaultArgs) => {
|
|
|
84
84
|
defaultLoaderPath: getDefaultLoaderPath(loader, rest.bundleLoad),
|
|
85
85
|
runtime,
|
|
86
86
|
getRuntimeVars: {
|
|
87
|
-
reactive: 'useW_load_rx_'
|
|
87
|
+
reactive: 'useW_load_rx_',
|
|
88
88
|
},
|
|
89
89
|
...rest,
|
|
90
90
|
};
|
package/dist/runtime.solid.jsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { selectFragment } from './runtime.jsx';
|
|
2
1
|
import { For } from 'solid-js';
|
|
2
|
+
import { selectFragment } from './runtime.jsx';
|
|
3
3
|
export default (props) => {
|
|
4
|
-
return <For each={props.x}>
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
return (<For each={props.x}>
|
|
5
|
+
{(fragment, i) => <>{selectFragment({ ...props, x: fragment }, i())}</>}
|
|
6
|
+
</For>);
|
|
7
7
|
};
|
package/dist/transformer.d.ts
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
import { Message } from 'wuchale';
|
|
2
|
-
import type * as JX from 'estree-jsx';
|
|
3
1
|
import type * as Estree from 'acorn';
|
|
2
|
+
import type * as JX from 'estree-jsx';
|
|
3
|
+
import type { CatalogExpr, CodePattern, HeuristicFunc, IndexTracker, Message, RuntimeConf, TransformOutput, UrlMatcher } from 'wuchale';
|
|
4
|
+
import { MixedVisitor } from 'wuchale/adapter-utils';
|
|
4
5
|
import { Transformer } from 'wuchale/adapter-vanilla';
|
|
5
|
-
import type { IndexTracker, HeuristicFunc, TransformOutput, RuntimeConf, CatalogExpr, CodePattern, UrlMatcher } from 'wuchale';
|
|
6
|
-
import { MixedVisitor, type CommentDirectives } from "wuchale/adapter-utils";
|
|
7
6
|
export declare function parseScriptJSX(content: string): [Estree.Program, Estree.Comment[][]];
|
|
8
7
|
type MixedNodesTypes = JX.JSXElement | JX.JSXFragment | JX.JSXText | JX.JSXExpressionContainer | JX.JSXSpreadChild;
|
|
9
8
|
export type JSXLib = 'default' | 'solidjs';
|
|
10
9
|
export declare class JSXTransformer extends Transformer {
|
|
11
10
|
currentElement?: string;
|
|
12
11
|
inCompoundText: boolean;
|
|
13
|
-
commentDirectivesStack: CommentDirectives[];
|
|
14
12
|
lastVisitIsComment: boolean;
|
|
15
13
|
currentJsxKey?: number;
|
|
16
14
|
mixedVisitor: MixedVisitor<MixedNodesTypes>;
|
|
@@ -28,7 +26,6 @@ export declare class JSXTransformer extends Transformer {
|
|
|
28
26
|
visitJSXExpressionContainer: (node: JX.JSXExpressionContainer) => Message[];
|
|
29
27
|
visitJSXAttribute: (node: JX.JSXAttribute) => Message[];
|
|
30
28
|
visitJSXSpreadAttribute: (node: JX.JSXSpreadAttribute) => Message[];
|
|
31
|
-
visitJSXEmptyExpression: (node: JX.JSXEmptyExpression) => Message[];
|
|
32
29
|
visitJx: (node: JX.Node | JX.JSXSpreadChild | Estree.Program) => Message[];
|
|
33
30
|
transformJx: (lib: JSXLib) => TransformOutput;
|
|
34
31
|
}
|
package/dist/transformer.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import MagicString from 'magic-string';
|
|
2
|
-
import { Parser } from 'acorn';
|
|
3
|
-
import { Message } from 'wuchale';
|
|
4
1
|
import { tsPlugin } from '@sveltejs/acorn-typescript';
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
2
|
+
import { Parser } from 'acorn';
|
|
3
|
+
import MagicString from 'magic-string';
|
|
4
|
+
import { MixedVisitor, nonWhitespaceText } from 'wuchale/adapter-utils';
|
|
5
|
+
import { parseScript, scriptParseOptionsWithComments, Transformer } from 'wuchale/adapter-vanilla';
|
|
7
6
|
const JsxParser = Parser.extend(tsPlugin({ jsx: true }));
|
|
8
7
|
export function parseScriptJSX(content) {
|
|
9
8
|
const [opts, comments] = scriptParseOptionsWithComments();
|
|
@@ -15,7 +14,6 @@ export class JSXTransformer extends Transformer {
|
|
|
15
14
|
// state
|
|
16
15
|
currentElement;
|
|
17
16
|
inCompoundText = false;
|
|
18
|
-
commentDirectivesStack = [];
|
|
19
17
|
lastVisitIsComment = false;
|
|
20
18
|
currentJsxKey;
|
|
21
19
|
mixedVisitor;
|
|
@@ -25,19 +23,19 @@ export class JSXTransformer extends Transformer {
|
|
|
25
23
|
initMixedVisitor = () => new MixedVisitor({
|
|
26
24
|
mstr: this.mstr,
|
|
27
25
|
vars: this.vars,
|
|
28
|
-
getRange: node => ({
|
|
26
|
+
getRange: (node) => ({
|
|
29
27
|
start: node.start,
|
|
30
|
-
end: node.end
|
|
28
|
+
end: node.end,
|
|
31
29
|
}),
|
|
32
|
-
isComment: node => node.type === 'JSXExpressionContainer'
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
isText: node => node.type === 'JSXText',
|
|
30
|
+
isComment: (node) => node.type === 'JSXExpressionContainer' &&
|
|
31
|
+
node.expression.type === 'JSXEmptyExpression' &&
|
|
32
|
+
node.expression.end > node.expression.start,
|
|
33
|
+
isText: (node) => node.type === 'JSXText',
|
|
36
34
|
leaveInPlace: () => false,
|
|
37
|
-
isExpression: node => node.type === 'JSXExpressionContainer',
|
|
35
|
+
isExpression: (node) => node.type === 'JSXExpressionContainer',
|
|
38
36
|
getTextContent: (node) => node.value,
|
|
39
37
|
getCommentData: (node) => this.getMarkupCommentBody(node.expression),
|
|
40
|
-
canHaveChildren: node => nodesWithChildren.includes(node.type),
|
|
38
|
+
canHaveChildren: (node) => nodesWithChildren.includes(node.type),
|
|
41
39
|
visitFunc: (child, inCompoundText) => {
|
|
42
40
|
const inCompoundTextPrev = this.inCompoundText;
|
|
43
41
|
this.inCompoundText = inCompoundText;
|
|
@@ -112,7 +110,7 @@ export class JSXTransformer extends Transformer {
|
|
|
112
110
|
msgs.push(...this.visitJx(attr));
|
|
113
111
|
}
|
|
114
112
|
if (this.inCompoundText && this.currentJsxKey != null) {
|
|
115
|
-
const key = node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'key');
|
|
113
|
+
const key = node.openingElement.attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name.name === 'key');
|
|
116
114
|
if (!key) {
|
|
117
115
|
this.mstr.appendLeft(node.openingElement.name.end, ` key="_${this.currentJsxKey}"`);
|
|
118
116
|
this.currentJsxKey++;
|
|
@@ -141,9 +139,7 @@ export class JSXTransformer extends Transformer {
|
|
|
141
139
|
}
|
|
142
140
|
return comment.slice(2, -2).trim();
|
|
143
141
|
};
|
|
144
|
-
visitJSXExpressionContainer = (node) =>
|
|
145
|
-
return this.visit(node.expression);
|
|
146
|
-
};
|
|
142
|
+
visitJSXExpressionContainer = (node) => this.visit(node.expression);
|
|
147
143
|
visitJSXAttribute = (node) => {
|
|
148
144
|
if (node.value == null) {
|
|
149
145
|
return [];
|
|
@@ -185,43 +181,7 @@ export class JSXTransformer extends Transformer {
|
|
|
185
181
|
return [msgInfo];
|
|
186
182
|
};
|
|
187
183
|
visitJSXSpreadAttribute = (node) => this.visit(node.argument);
|
|
188
|
-
|
|
189
|
-
const commentContents = this.getMarkupCommentBody(node);
|
|
190
|
-
if (!commentContents) {
|
|
191
|
-
return [];
|
|
192
|
-
}
|
|
193
|
-
this.commentDirectives = processCommentDirectives(commentContents, this.commentDirectives);
|
|
194
|
-
if (this.lastVisitIsComment) {
|
|
195
|
-
this.commentDirectivesStack[this.commentDirectivesStack.length - 1] = this.commentDirectives;
|
|
196
|
-
}
|
|
197
|
-
else {
|
|
198
|
-
this.commentDirectivesStack.push(this.commentDirectives);
|
|
199
|
-
}
|
|
200
|
-
this.lastVisitIsComment = true;
|
|
201
|
-
return [];
|
|
202
|
-
};
|
|
203
|
-
visitJx = (node) => {
|
|
204
|
-
if (node.type === 'JSXText' && !node.value.trim()) {
|
|
205
|
-
return [];
|
|
206
|
-
}
|
|
207
|
-
if (node.type === 'JSXExpressionContainer' && node.expression.type === 'JSXEmptyExpression') { // markup comment
|
|
208
|
-
return this.visitJSXEmptyExpression(node.expression);
|
|
209
|
-
}
|
|
210
|
-
let msgs = [];
|
|
211
|
-
const commentDirectivesPrev = this.commentDirectives;
|
|
212
|
-
if (this.lastVisitIsComment) {
|
|
213
|
-
this.commentDirectives = this.commentDirectivesStack.pop();
|
|
214
|
-
this.lastVisitIsComment = false;
|
|
215
|
-
}
|
|
216
|
-
if (this.commentDirectives.ignoreFile) {
|
|
217
|
-
return [];
|
|
218
|
-
}
|
|
219
|
-
if (this.commentDirectives.forceType !== false) {
|
|
220
|
-
msgs = this.visit(node);
|
|
221
|
-
}
|
|
222
|
-
this.commentDirectives = commentDirectivesPrev;
|
|
223
|
-
return msgs;
|
|
224
|
-
};
|
|
184
|
+
visitJx = (node) => this.visit(node);
|
|
225
185
|
transformJx = (lib) => {
|
|
226
186
|
// jsx vs type casting is not ambiguous in all files except .ts files
|
|
227
187
|
const [ast, comments] = (this.heuristciDetails.file.endsWith('.ts') ? parseScript : parseScriptJSX)(this.content);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wuchale/jsx",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.1",
|
|
4
4
|
"description": "Protobuf-like i18n from plain code: JSX adapter",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "tsc --watch",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@sveltejs/acorn-typescript": "^1.0.8",
|
|
62
62
|
"acorn": "^8.15.0",
|
|
63
63
|
"magic-string": "^0.30.21",
|
|
64
|
-
"wuchale": "^0.19.
|
|
64
|
+
"wuchale": "^0.19.1"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
67
|
"@types/estree-jsx": "^1.0.5",
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useEffect, useMemo, useState } from 'react'
|
|
2
2
|
import toRuntime from 'wuchale/runtime'
|
|
3
3
|
import { locales } from '${DATA}'
|
|
4
4
|
|
|
5
5
|
let locale = locales[0]
|
|
6
6
|
|
|
7
|
-
const callbacks = new Set([
|
|
7
|
+
const callbacks = new Set([
|
|
8
|
+
(/** @type {string} */ loc) => {
|
|
9
|
+
locale = loc
|
|
10
|
+
},
|
|
11
|
+
])
|
|
8
12
|
|
|
9
13
|
/**
|
|
10
14
|
* @param {string} locale
|
|
@@ -26,4 +30,5 @@ export const getRuntimeRx = (/** @type {{[locale: string]: import('wuchale/runti
|
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
// non-reactive
|
|
29
|
-
export const getRuntime = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) =>
|
|
33
|
+
export const getRuntime = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) =>
|
|
34
|
+
toRuntime(catalogs[locale], locale)
|
package/src/loaders/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useEffect, useState } from 'react'
|
|
2
2
|
import { registerLoaders } from 'wuchale/load-utils'
|
|
3
|
-
import {
|
|
3
|
+
import { loadCatalog, loadIDs } from '${PROXY}'
|
|
4
4
|
|
|
5
5
|
export const key = '${KEY}'
|
|
6
6
|
/** @type {{[loadID: string]: Set<Function>}} */
|
|
@@ -14,8 +14,10 @@ const collection = {
|
|
|
14
14
|
get: getRuntime,
|
|
15
15
|
set: (/** @type {string} */ loadID, /** @type {import('wuchale/runtime').Runtime} */ runtime) => {
|
|
16
16
|
store[loadID] = runtime // for when useEffect hasn't run yet
|
|
17
|
-
callbacks[loadID]?.forEach(cb =>
|
|
18
|
-
|
|
17
|
+
callbacks[loadID]?.forEach((cb) => {
|
|
18
|
+
cb(runtime)
|
|
19
|
+
})
|
|
20
|
+
},
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
registerLoaders(key, loadCatalog, loadIDs, collection)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createSignal } from
|
|
2
|
-
import toRuntime from
|
|
1
|
+
import { createSignal } from 'solid-js'
|
|
2
|
+
import toRuntime from 'wuchale/runtime'
|
|
3
3
|
|
|
4
4
|
const [locale, setLocale] = createSignal('en')
|
|
5
5
|
|
|
@@ -8,6 +8,6 @@ export { setLocale }
|
|
|
8
8
|
/**
|
|
9
9
|
* @param {{ [locale: string]: import('wuchale/runtime').CatalogModule }} catalogs
|
|
10
10
|
*/
|
|
11
|
-
export const getRuntimeRx = catalogs => toRuntime(catalogs[locale()], locale())
|
|
11
|
+
export const getRuntimeRx = (catalogs) => toRuntime(catalogs[locale()], locale())
|
|
12
12
|
// same function, because solid-js can use them anywhere
|
|
13
13
|
export const getRuntime = getRuntimeRx
|
package/src/loaders/solidjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { loadCatalog, loadIDs } from '${PROXY}'
|
|
2
|
-
import { registerLoaders } from 'wuchale/load-utils'
|
|
3
1
|
import { createStore } from 'solid-js/store'
|
|
2
|
+
import { registerLoaders } from 'wuchale/load-utils'
|
|
3
|
+
import { loadCatalog, loadIDs } from '${PROXY}'
|
|
4
4
|
|
|
5
5
|
const key = '${KEY}'
|
|
6
6
|
|
|
@@ -8,7 +8,7 @@ const [store, setStore] = createStore({})
|
|
|
8
8
|
|
|
9
9
|
// two exports. can be the same because solid-js can use them anywhere unlike react
|
|
10
10
|
export const getRuntimeRx = registerLoaders(key, loadCatalog, loadIDs, {
|
|
11
|
-
get: loadID => store[loadID],
|
|
11
|
+
get: (loadID) => store[loadID],
|
|
12
12
|
set: (loadID, runtime) => setStore(loadID, () => runtime),
|
|
13
13
|
})
|
|
14
14
|
export const getRuntime = getRuntimeRx
|