@navita/core 0.0.0 → 0.0.4
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/LICENSE.md +21 -0
- package/createRenderer.d.ts +21 -11
- package/createRenderer.js +45 -315
- package/createRenderer.mjs +45 -298
- package/evaluateAndProcess.d.ts +32 -10
- package/evaluateAndProcess.js +254 -49
- package/evaluateAndProcess.mjs +259 -37
- package/index.d.ts +1 -22
- package/index.js +0 -53
- package/index.mjs +0 -47
- package/package.json +18 -11
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Alexander Liljengård
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/createRenderer.d.ts
CHANGED
|
@@ -1,15 +1,25 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { Options as Options$1, Engine, UsedIdCache } from '@navita/engine';
|
|
2
|
+
export { Engine, Options as EngineOptions, UsedIdCache } from '@navita/engine';
|
|
3
|
+
import { ImportMap } from '@navita/types';
|
|
4
|
+
export { ImportMap } from '@navita/types';
|
|
3
5
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
renderStatic(css: StyleRule, selector: string): void;
|
|
10
|
-
}
|
|
6
|
+
interface Options {
|
|
7
|
+
resolver: (filepath: string, request: string) => Promise<string>;
|
|
8
|
+
readFile: (filepath: string) => Promise<string>;
|
|
9
|
+
importMap: ImportMap;
|
|
10
|
+
engineOptions?: Options$1;
|
|
11
11
|
}
|
|
12
|
-
declare function createRenderer():
|
|
12
|
+
declare function createRenderer({ resolver, readFile, importMap, engineOptions, }: Options): {
|
|
13
|
+
engine: Engine;
|
|
14
|
+
transformAndProcess({ content, filePath, }: {
|
|
15
|
+
content: string;
|
|
16
|
+
filePath: string;
|
|
17
|
+
}): Promise<{
|
|
18
|
+
result: string;
|
|
19
|
+
dependencies: string[];
|
|
20
|
+
usedIds: UsedIdCache;
|
|
21
|
+
}>;
|
|
22
|
+
};
|
|
13
23
|
type Renderer = ReturnType<typeof createRenderer>;
|
|
14
24
|
|
|
15
|
-
export { Renderer, createRenderer };
|
|
25
|
+
export { Options, Renderer, createRenderer };
|
package/createRenderer.js
CHANGED
|
@@ -1,325 +1,55 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
return (renderer)=>{
|
|
44
|
-
renderer.generateClassName = ()=>{
|
|
45
|
-
return generateString(renderer.getNextRuleIdentifier, blacklist);
|
|
46
|
-
};
|
|
47
|
-
renderer.generateAnimationName = ()=>{
|
|
48
|
-
return generateString(renderer.getNextKeyframeIdentifier, blacklist);
|
|
49
|
-
};
|
|
50
|
-
return renderer;
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function createResult(renderer, filePath, isServer) {
|
|
55
|
-
const values = renderer.evaluatedResults.get(filePath) || [];
|
|
56
|
-
if (isServer && renderer.classPropertyList) {
|
|
57
|
-
// Todo: this is just a POC. It needs to be cleaned up, but it's a different build for
|
|
58
|
-
// the server. On the client we'll use browser APIs.
|
|
59
|
-
// We're using this class list to be able to merge during runtime.
|
|
60
|
-
const newResult = (values || []).map((item)=>{
|
|
61
|
-
if (typeof item === "string") {
|
|
62
|
-
const rules = item.split(' ').map((x)=>renderer.classPropertyList.has(x) ? [
|
|
63
|
-
x,
|
|
64
|
-
[
|
|
65
|
-
...renderer.classPropertyList.get(x)
|
|
66
|
-
]
|
|
67
|
-
] : false).filter(Boolean);
|
|
68
|
-
return `new (require('@navita/css').ClassList)("${item}", ${JSON.stringify(rules)})`;
|
|
69
|
-
}
|
|
70
|
-
return JSON.stringify(item);
|
|
71
|
-
});
|
|
72
|
-
return `const $$evaluatedValues = [${newResult}];`;
|
|
73
|
-
}
|
|
74
|
-
return `const $$evaluatedValues = ${JSON.stringify(values || [])};`;
|
|
75
|
-
}
|
|
76
|
-
function evaluatedResult() {
|
|
77
|
-
return (renderer)=>{
|
|
78
|
-
renderer.evaluatedResults = new Map();
|
|
79
|
-
renderer.setEvaluatedResult = (fileName, index, value)=>{
|
|
80
|
-
if (!renderer.evaluatedResults.has(fileName)) {
|
|
81
|
-
renderer.evaluatedResults.set(fileName, []);
|
|
3
|
+
var engine = require('@navita/engine');
|
|
4
|
+
var swc = require('@navita/swc');
|
|
5
|
+
var evaluateAndProcess = require('./evaluateAndProcess.js');
|
|
6
|
+
require('node:path');
|
|
7
|
+
require('node:vm');
|
|
8
|
+
require('node:fs');
|
|
9
|
+
require('enhanced-resolve');
|
|
10
|
+
require('@navita/adapter');
|
|
11
|
+
|
|
12
|
+
function startsWithRSCDirective(content) {
|
|
13
|
+
return /^(['"])use client\1;?/.test(content);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function createRenderer({ resolver , readFile , importMap =[] , engineOptions }) {
|
|
17
|
+
const engine$1 = new engine.Engine(engineOptions);
|
|
18
|
+
return {
|
|
19
|
+
engine: engine$1,
|
|
20
|
+
async transformAndProcess ({ content , filePath }) {
|
|
21
|
+
const [newContent, { result , dependencies }] = await Promise.all([
|
|
22
|
+
swc.transformer(content, {
|
|
23
|
+
filename: filePath,
|
|
24
|
+
importMap
|
|
25
|
+
}),
|
|
26
|
+
evaluateAndProcess.evaluateAndProcess({
|
|
27
|
+
type: 'entryPoint',
|
|
28
|
+
source: content,
|
|
29
|
+
filePath,
|
|
30
|
+
resolver,
|
|
31
|
+
readFile,
|
|
32
|
+
importMap,
|
|
33
|
+
engine: engine$1
|
|
34
|
+
})
|
|
35
|
+
]);
|
|
36
|
+
const finalContent = [];
|
|
37
|
+
// Check if content starts with "use client".
|
|
38
|
+
if (startsWithRSCDirective(content)) {
|
|
39
|
+
const [directive, ...restContent] = newContent.trim().split('\n');
|
|
40
|
+
finalContent.push(directive, result, ...restContent);
|
|
41
|
+
} else {
|
|
42
|
+
finalContent.push(result, newContent.trim());
|
|
82
43
|
}
|
|
83
|
-
renderer.evaluatedResults.get(fileName)[index] = value;
|
|
84
|
-
};
|
|
85
|
-
renderer.getResult = (filePath, isServer)=>{
|
|
86
|
-
const result = createResult(renderer, filePath, isServer || false);
|
|
87
44
|
return {
|
|
88
|
-
result,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
45
|
+
result: finalContent.join('\n'),
|
|
46
|
+
dependencies,
|
|
47
|
+
usedIds: engine$1.getUsedCacheIds([
|
|
48
|
+
filePath
|
|
49
|
+
])
|
|
92
50
|
};
|
|
93
|
-
};
|
|
94
|
-
return renderer;
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function isMediaQuery(rule) {
|
|
99
|
-
return rule.startsWith('@media');
|
|
100
|
-
}
|
|
101
|
-
function isSupportsQuery(rule) {
|
|
102
|
-
return rule.startsWith('@supports');
|
|
103
|
-
}
|
|
104
|
-
function isPseudoSelector(rule) {
|
|
105
|
-
return rule.startsWith(':');
|
|
106
|
-
}
|
|
107
|
-
function wrapWith(atRule, query, content) {
|
|
108
|
-
return query.length > 0 ? `${atRule} ${query} {${content}}` : content;
|
|
109
|
-
}
|
|
110
|
-
function createCssRule(selector, properties) {
|
|
111
|
-
return `${selector}{${properties.map((rule)=>`${cssifyProperty(rule.property)}: ${rule.value};`).join('')}}`;
|
|
112
|
-
}
|
|
113
|
-
function generateCombinedMediaQuery(currentMediaQuery, nestedMediaQuery) {
|
|
114
|
-
if (currentMediaQuery.length === 0) {
|
|
115
|
-
return nestedMediaQuery;
|
|
116
|
-
}
|
|
117
|
-
return `${currentMediaQuery} and ${nestedMediaQuery}`;
|
|
118
|
-
}
|
|
119
|
-
function cssifyProperty(property) {
|
|
120
|
-
return property.replace(/([a-zA-Z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
121
|
-
}
|
|
122
|
-
function isObject(value) {
|
|
123
|
-
return typeof value === 'object' && !Array.isArray(value);
|
|
124
|
-
}
|
|
125
|
-
function collectAndGroupRules(cssObj, currentSupportsQuery = '', currentMediaQuery = '', currentPseudoSelector = '', groupedRules = {}) {
|
|
126
|
-
for (const [property, value] of Object.entries(cssObj)){
|
|
127
|
-
if (!isObject(value)) {
|
|
128
|
-
if (!groupedRules[currentSupportsQuery]) {
|
|
129
|
-
groupedRules[currentSupportsQuery] = {};
|
|
130
|
-
}
|
|
131
|
-
const supportsGroup = groupedRules[currentSupportsQuery];
|
|
132
|
-
if (!supportsGroup[currentMediaQuery]) {
|
|
133
|
-
supportsGroup[currentMediaQuery] = {};
|
|
134
|
-
}
|
|
135
|
-
const mediaGroup = supportsGroup[currentMediaQuery];
|
|
136
|
-
if (!mediaGroup[currentPseudoSelector]) {
|
|
137
|
-
mediaGroup[currentPseudoSelector] = [];
|
|
138
|
-
}
|
|
139
|
-
mediaGroup[currentPseudoSelector].push({
|
|
140
|
-
property,
|
|
141
|
-
value
|
|
142
|
-
});
|
|
143
|
-
continue;
|
|
144
51
|
}
|
|
145
|
-
if (isMediaQuery(property)) {
|
|
146
|
-
collectAndGroupRules(value, currentSupportsQuery, generateCombinedMediaQuery(currentMediaQuery, property.slice(6).trim()), currentPseudoSelector, groupedRules);
|
|
147
|
-
continue;
|
|
148
|
-
}
|
|
149
|
-
if (isSupportsQuery(property)) {
|
|
150
|
-
collectAndGroupRules(value, generateCombinedMediaQuery(currentSupportsQuery, property.slice(9).trim()), currentMediaQuery, currentPseudoSelector, groupedRules);
|
|
151
|
-
continue;
|
|
152
|
-
}
|
|
153
|
-
if (isPseudoSelector(property)) {
|
|
154
|
-
collectAndGroupRules(value, currentSupportsQuery, currentMediaQuery, currentPseudoSelector + property, groupedRules);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
return groupedRules;
|
|
158
|
-
}
|
|
159
|
-
function serializeCss(selector, cssObj) {
|
|
160
|
-
const processPseudoSelectors = (pseudoSelectors)=>Object.entries(pseudoSelectors).map(([pseudo, properties])=>createCssRule(`${selector}${pseudo}`, properties)).join('');
|
|
161
|
-
const processMediaQueries = (mediaQueries)=>Object.entries(mediaQueries).map(([media, pseudoSelectors])=>wrapWith('@media', media, processPseudoSelectors(pseudoSelectors))).join('');
|
|
162
|
-
const rules = collectAndGroupRules(cssObj);
|
|
163
|
-
return Object.entries(rules).map(([supports, mediaQueries])=>wrapWith('@supports', supports, processMediaQueries(mediaQueries))).join('');
|
|
164
|
-
}
|
|
165
|
-
function nestedStatic() {
|
|
166
|
-
// Fela doesn't handle nested static styles correctly. This is a workaround for now.
|
|
167
|
-
// https://github.com/robinweser/fela/issues/876
|
|
168
|
-
// https://github.com/robinweser/fela/issues/465#issuecomment-594396150
|
|
169
|
-
// https://github.com/robinweser/fela/issues/863
|
|
170
|
-
return (renderer)=>{
|
|
171
|
-
const { renderStatic } = renderer;
|
|
172
|
-
renderer.renderStatic = (staticStyle, selector)=>{
|
|
173
|
-
return renderStatic(serializeCss(selector, staticStyle), undefined);
|
|
174
|
-
};
|
|
175
|
-
return renderer;
|
|
176
52
|
};
|
|
177
53
|
}
|
|
178
54
|
|
|
179
|
-
function renderToString() {
|
|
180
|
-
return (renderer)=>{
|
|
181
|
-
renderer.renderToString = (fileName)=>{
|
|
182
|
-
if (!renderer.getScopedCache || !renderer.accessedKeys) {
|
|
183
|
-
return felaTools.renderToString(renderer);
|
|
184
|
-
}
|
|
185
|
-
if (fileName) {
|
|
186
|
-
return felaTools.renderToString({
|
|
187
|
-
...renderer,
|
|
188
|
-
cache: renderer.getScopedCache(fileName)
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
const newCache = {};
|
|
192
|
-
for (const keys of renderer.accessedKeys.values()){
|
|
193
|
-
for (const key of keys){
|
|
194
|
-
const item = renderer.cache[key];
|
|
195
|
-
if (!item) {
|
|
196
|
-
continue;
|
|
197
|
-
}
|
|
198
|
-
newCache[key] = item;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
return felaTools.renderToString({
|
|
202
|
-
...renderer,
|
|
203
|
-
cache: newCache
|
|
204
|
-
});
|
|
205
|
-
};
|
|
206
|
-
return renderer;
|
|
207
|
-
};
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
function scopedCache() {
|
|
211
|
-
return (renderer)=>{
|
|
212
|
-
let currentFileName;
|
|
213
|
-
const ensureCache = ()=>{
|
|
214
|
-
if (types.isProxy(renderer.cache)) {
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
renderer.cache = new Proxy(renderer.cache, {
|
|
218
|
-
getOwnPropertyDescriptor (target, key) {
|
|
219
|
-
const result = Reflect.getOwnPropertyDescriptor(target, key);
|
|
220
|
-
const { accessedKeys } = renderer;
|
|
221
|
-
if (!currentFileName) {
|
|
222
|
-
return result;
|
|
223
|
-
}
|
|
224
|
-
if (!accessedKeys.has(currentFileName)) {
|
|
225
|
-
accessedKeys.set(currentFileName, new Set());
|
|
226
|
-
}
|
|
227
|
-
accessedKeys.get(currentFileName)?.add(key);
|
|
228
|
-
return result;
|
|
229
|
-
}
|
|
230
|
-
});
|
|
231
|
-
};
|
|
232
|
-
renderer.setFilePath = (filePath)=>{
|
|
233
|
-
currentFileName = filePath;
|
|
234
|
-
// After we've set the file path, we need to ensure that the cache is a proxy,
|
|
235
|
-
// and set up to record accessed keys.
|
|
236
|
-
// Without a filePath, the proxy on the cache doesn't make sense, so this is a good place to do it.
|
|
237
|
-
ensureCache();
|
|
238
|
-
};
|
|
239
|
-
renderer.accessedKeys = new Map();
|
|
240
|
-
renderer.clearAccessedKeys = (filePath)=>{
|
|
241
|
-
renderer.accessedKeys.get(filePath)?.clear();
|
|
242
|
-
};
|
|
243
|
-
renderer.getScopedCache = (filePath)=>{
|
|
244
|
-
const { accessedKeys } = renderer;
|
|
245
|
-
const newCache = {};
|
|
246
|
-
if (accessedKeys.has(filePath)) {
|
|
247
|
-
const keys = accessedKeys.get(filePath);
|
|
248
|
-
for (const key of keys){
|
|
249
|
-
const item = renderer.cache[key];
|
|
250
|
-
if (!item) {
|
|
251
|
-
continue;
|
|
252
|
-
}
|
|
253
|
-
newCache[key] = item;
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
return newCache;
|
|
257
|
-
};
|
|
258
|
-
renderer.classPropertyList = new Map();
|
|
259
|
-
renderer.subscribe((message)=>{
|
|
260
|
-
if (message.type === 'RULE') {
|
|
261
|
-
const { declaration , className } = message;
|
|
262
|
-
const [property] = declaration.split(':');
|
|
263
|
-
if (!property) {
|
|
264
|
-
return;
|
|
265
|
-
}
|
|
266
|
-
const { classPropertyList } = renderer;
|
|
267
|
-
if (!classPropertyList.has(className)) {
|
|
268
|
-
classPropertyList.set(className, new Set());
|
|
269
|
-
}
|
|
270
|
-
classPropertyList.get(className)?.add(property);
|
|
271
|
-
}
|
|
272
|
-
});
|
|
273
|
-
return renderer;
|
|
274
|
-
};
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
function serializedCache(keys = []) {
|
|
278
|
-
return (renderer)=>{
|
|
279
|
-
renderer.serialize = ()=>{
|
|
280
|
-
const obj = {};
|
|
281
|
-
for (const key of keys){
|
|
282
|
-
const value = renderer[key];
|
|
283
|
-
if (types.isProxy(value)) {
|
|
284
|
-
obj[key] = Object.assign({}, value);
|
|
285
|
-
} else {
|
|
286
|
-
obj[key] = value;
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
return v8__namespace.serialize(obj).toString('base64');
|
|
290
|
-
};
|
|
291
|
-
renderer.deserialize = (serialized)=>{
|
|
292
|
-
if (!serialized) {
|
|
293
|
-
return;
|
|
294
|
-
}
|
|
295
|
-
const data = v8__namespace.deserialize(Buffer.from(serialized, 'base64'));
|
|
296
|
-
for (const [key, value] of Object.entries(data)){
|
|
297
|
-
renderer[key] = value;
|
|
298
|
-
}
|
|
299
|
-
};
|
|
300
|
-
return renderer;
|
|
301
|
-
};
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
function createRenderer() {
|
|
305
|
-
return fela.createRenderer({
|
|
306
|
-
enhancers: [
|
|
307
|
-
className([
|
|
308
|
-
'ad'
|
|
309
|
-
]),
|
|
310
|
-
scopedCache(),
|
|
311
|
-
serializedCache([
|
|
312
|
-
'cache',
|
|
313
|
-
'classPropertyList',
|
|
314
|
-
'accessedKeys',
|
|
315
|
-
'uniqueRuleIdentifier',
|
|
316
|
-
'uniqueKeyframeIdentifier'
|
|
317
|
-
]),
|
|
318
|
-
evaluatedResult(),
|
|
319
|
-
renderToString(),
|
|
320
|
-
nestedStatic()
|
|
321
|
-
]
|
|
322
|
-
});
|
|
323
|
-
}
|
|
324
|
-
|
|
325
55
|
exports.createRenderer = createRenderer;
|