@twick/vite-plugin 0.14.21 → 0.15.0
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.cjs +866 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +172 -0
- package/dist/index.d.ts +172 -0
- package/dist/index.js +842 -0
- package/dist/index.js.map +1 -0
- package/package.json +31 -18
- package/lib/index.d.ts +0 -3
- package/lib/index.js +0 -23
- package/lib/index.js.map +0 -1
- package/lib/main.d.ts +0 -71
- package/lib/main.js +0 -40
- package/lib/main.js.map +0 -1
- package/lib/openInExplorer.d.ts +0 -1
- package/lib/openInExplorer.js +0 -44
- package/lib/openInExplorer.js.map +0 -1
- package/lib/partials/assets.d.ts +0 -6
- package/lib/partials/assets.js +0 -50
- package/lib/partials/assets.js.map +0 -1
- package/lib/partials/editor.d.ts +0 -8
- package/lib/partials/editor.js +0 -73
- package/lib/partials/editor.js.map +0 -1
- package/lib/partials/ffmpegBridge.d.ts +0 -40
- package/lib/partials/ffmpegBridge.js +0 -195
- package/lib/partials/ffmpegBridge.js.map +0 -1
- package/lib/partials/imageExporter.d.ts +0 -6
- package/lib/partials/imageExporter.js +0 -45
- package/lib/partials/imageExporter.js.map +0 -1
- package/lib/partials/index.d.ts +0 -11
- package/lib/partials/index.js +0 -28
- package/lib/partials/index.js.map +0 -1
- package/lib/partials/meta.d.ts +0 -2
- package/lib/partials/meta.js +0 -68
- package/lib/partials/meta.js.map +0 -1
- package/lib/partials/metrics.d.ts +0 -2
- package/lib/partials/metrics.js +0 -13
- package/lib/partials/metrics.js.map +0 -1
- package/lib/partials/projects.d.ts +0 -10
- package/lib/partials/projects.js +0 -34
- package/lib/partials/projects.js.map +0 -1
- package/lib/partials/rive.d.ts +0 -2
- package/lib/partials/rive.js +0 -70
- package/lib/partials/rive.js.map +0 -1
- package/lib/partials/settings.d.ts +0 -2
- package/lib/partials/settings.js +0 -65
- package/lib/partials/settings.js.map +0 -1
- package/lib/partials/wasmExporter.d.ts +0 -2
- package/lib/partials/wasmExporter.js +0 -87
- package/lib/partials/wasmExporter.js.map +0 -1
- package/lib/partials/webgl.d.ts +0 -10
- package/lib/partials/webgl.js +0 -88
- package/lib/partials/webgl.js.map +0 -1
- package/lib/plugins.d.ts +0 -99
- package/lib/plugins.js +0 -9
- package/lib/plugins.js.map +0 -1
- package/lib/tsconfig.tsbuildinfo +0 -1
- package/lib/utils.d.ts +0 -6
- package/lib/utils.js +0 -44
- package/lib/utils.js.map +0 -1
- package/lib/versions.d.ts +0 -6
- package/lib/versions.js +0 -28
- package/lib/versions.js.map +0 -1
package/dist/index.js
ADDED
|
@@ -0,0 +1,842 @@
|
|
|
1
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
2
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
3
|
+
}) : x)(function(x) {
|
|
4
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
5
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
6
|
+
});
|
|
7
|
+
|
|
8
|
+
// src/main.ts
|
|
9
|
+
import path10 from "path";
|
|
10
|
+
|
|
11
|
+
// src/partials/assets.ts
|
|
12
|
+
import fs from "fs";
|
|
13
|
+
import path from "path";
|
|
14
|
+
import { Readable } from "stream";
|
|
15
|
+
var AUDIO_EXTENSION_REGEX = /\.(mp3|wav|ogg|aac|flac)(?:$|\?)/;
|
|
16
|
+
var AUDIO_HMR_DELAY = 1e3;
|
|
17
|
+
function assetsPlugin({ bufferedAssets }) {
|
|
18
|
+
let config;
|
|
19
|
+
return {
|
|
20
|
+
name: "twick:assets",
|
|
21
|
+
configResolved(resolvedConfig) {
|
|
22
|
+
config = resolvedConfig;
|
|
23
|
+
},
|
|
24
|
+
configureServer(server) {
|
|
25
|
+
server.middlewares.use((req, res, next) => {
|
|
26
|
+
if (req.url && bufferedAssets && bufferedAssets.test(req.url)) {
|
|
27
|
+
const file = fs.readFileSync(
|
|
28
|
+
path.resolve(config.root, req.url.slice(1))
|
|
29
|
+
);
|
|
30
|
+
Readable.from(file).pipe(res);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
next();
|
|
34
|
+
});
|
|
35
|
+
},
|
|
36
|
+
async handleHotUpdate(ctx) {
|
|
37
|
+
const urls = [];
|
|
38
|
+
const modules = [];
|
|
39
|
+
for (const module of ctx.modules) {
|
|
40
|
+
urls.push(module.url);
|
|
41
|
+
if (!AUDIO_EXTENSION_REGEX.test(module.url)) {
|
|
42
|
+
modules.push(module);
|
|
43
|
+
} else {
|
|
44
|
+
await new Promise((resolve) => {
|
|
45
|
+
setTimeout(resolve, AUDIO_HMR_DELAY);
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (urls.length > 0) {
|
|
50
|
+
ctx.server.ws.send("twick:assets", { urls });
|
|
51
|
+
}
|
|
52
|
+
return modules;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// src/partials/editor.ts
|
|
58
|
+
import fs2 from "fs";
|
|
59
|
+
import path2 from "path";
|
|
60
|
+
function editorPlugin({ editor, projects }) {
|
|
61
|
+
const editorPath = path2.dirname(__require.resolve(editor));
|
|
62
|
+
const editorFile = fs2.readFileSync(path2.resolve(editorPath, "editor.html"));
|
|
63
|
+
const htmlParts = editorFile.toString().replace("{{style}}", `/@fs/${path2.resolve(editorPath, "style.css")}`).split("{{source}}");
|
|
64
|
+
const createHtml = (src) => htmlParts[0] + src + htmlParts[1];
|
|
65
|
+
const resolvedEditorId = "\0virtual:editor";
|
|
66
|
+
return {
|
|
67
|
+
name: "twick:editor",
|
|
68
|
+
async load(id) {
|
|
69
|
+
const [, query] = id.split("?");
|
|
70
|
+
if (id.startsWith(resolvedEditorId)) {
|
|
71
|
+
if (projects.list.length === 1) {
|
|
72
|
+
return `import {editor} from '${editor}';
|
|
73
|
+
import project from '${projects.list[0].url}';
|
|
74
|
+
import {addEditorToProject} from '@twick/core';
|
|
75
|
+
editor(await addEditorToProject(project));
|
|
76
|
+
`;
|
|
77
|
+
}
|
|
78
|
+
if (query) {
|
|
79
|
+
const params = new URLSearchParams(query);
|
|
80
|
+
const name = params.get("project");
|
|
81
|
+
if (name && projects.lookup.has(name)) {
|
|
82
|
+
return `import {editor} from '${editor}';
|
|
83
|
+
import project from '${projects.lookup.get(name).url}';
|
|
84
|
+
import {addEditorToProject} from '@twick/core';
|
|
85
|
+
editor(await addEditorToProject(project));
|
|
86
|
+
`;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return `import {index} from '${editor}';
|
|
90
|
+
index(${JSON.stringify(projects.list)});
|
|
91
|
+
`;
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
configureServer(server) {
|
|
95
|
+
server.middlewares.use((req, res, next) => {
|
|
96
|
+
if (req.url) {
|
|
97
|
+
const url = new URL(req.url, `http://${req.headers.host}`);
|
|
98
|
+
if (url.pathname === "/") {
|
|
99
|
+
res.setHeader("Content-Type", "text/html");
|
|
100
|
+
res.end(createHtml("/@id/__x00__virtual:editor"));
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
const name = url.pathname.slice(1);
|
|
104
|
+
if (name && projects.lookup.has(name)) {
|
|
105
|
+
res.setHeader("Content-Type", "text/html");
|
|
106
|
+
res.end(createHtml(`/@id/__x00__virtual:editor?project=${name}`));
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
next();
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// src/partials/ffmpegBridge.ts
|
|
117
|
+
import {
|
|
118
|
+
FFmpegExporterServer,
|
|
119
|
+
VideoFrameExtractor,
|
|
120
|
+
generateAudio,
|
|
121
|
+
mergeMedia
|
|
122
|
+
} from "@twick/ffmpeg";
|
|
123
|
+
import { existsSync, unlinkSync } from "fs";
|
|
124
|
+
function ffmpegBridgePlugin({ output }) {
|
|
125
|
+
return {
|
|
126
|
+
name: "twick/ffmpeg",
|
|
127
|
+
configureServer(server) {
|
|
128
|
+
const ffmpegBridge = new FFmpegBridge(server.ws, { output });
|
|
129
|
+
const handlePostRequest = async (req, res, handler) => {
|
|
130
|
+
if (req.method !== "POST") {
|
|
131
|
+
res.statusCode = 405;
|
|
132
|
+
res.end("Method Not Allowed");
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
try {
|
|
136
|
+
const body = await new Promise((resolve, reject) => {
|
|
137
|
+
let data = "";
|
|
138
|
+
req.on("data", (chunk) => data += chunk);
|
|
139
|
+
req.on("end", () => resolve(data));
|
|
140
|
+
req.on("error", reject);
|
|
141
|
+
});
|
|
142
|
+
const parsedBody = JSON.parse(body);
|
|
143
|
+
const result = await handler(parsedBody);
|
|
144
|
+
if (res.writableEnded) {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
res.statusCode = 200;
|
|
148
|
+
if (result) {
|
|
149
|
+
res.setHeader("Content-Type", "application/json");
|
|
150
|
+
res.end(JSON.stringify(result));
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
res.end("OK");
|
|
154
|
+
} catch (error) {
|
|
155
|
+
console.error("error in request handler", error);
|
|
156
|
+
res.statusCode = 500;
|
|
157
|
+
res.end("Internal Server Error");
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
server.middlewares.use(
|
|
161
|
+
"/audio-processing/generate-audio",
|
|
162
|
+
(req, res) => handlePostRequest(
|
|
163
|
+
req,
|
|
164
|
+
res,
|
|
165
|
+
async ({ tempDir, assets, startFrame, endFrame, fps }) => generateAudio({
|
|
166
|
+
outputDir: output,
|
|
167
|
+
tempDir,
|
|
168
|
+
assets,
|
|
169
|
+
startFrame,
|
|
170
|
+
endFrame,
|
|
171
|
+
fps
|
|
172
|
+
})
|
|
173
|
+
)
|
|
174
|
+
);
|
|
175
|
+
server.middlewares.use(
|
|
176
|
+
"/audio-processing/merge-media",
|
|
177
|
+
(req, res) => handlePostRequest(
|
|
178
|
+
req,
|
|
179
|
+
res,
|
|
180
|
+
async ({ outputFilename, tempDir, format }) => mergeMedia(outputFilename, output, tempDir, format)
|
|
181
|
+
)
|
|
182
|
+
);
|
|
183
|
+
server.middlewares.use(
|
|
184
|
+
"/twick-ffmpeg-decoder/video-frame",
|
|
185
|
+
(req, res) => handlePostRequest(req, res, async (data) => {
|
|
186
|
+
const { frame, width, height } = await ffmpegBridge.handleDecodeVideoFrame(data);
|
|
187
|
+
res.setHeader("X-Frame-Width", width.toString());
|
|
188
|
+
res.setHeader("X-Frame-Height", height.toString());
|
|
189
|
+
res.setHeader("Content-Type", "application/octet-stream");
|
|
190
|
+
res.end(Buffer.from(frame));
|
|
191
|
+
})
|
|
192
|
+
);
|
|
193
|
+
server.middlewares.use("/twick-ffmpeg-decoder/finished", (req, res) => {
|
|
194
|
+
handlePostRequest(req, res, async () => {
|
|
195
|
+
await ffmpegBridge.handleRenderFinished();
|
|
196
|
+
});
|
|
197
|
+
});
|
|
198
|
+
server.middlewares.use(
|
|
199
|
+
"/twick-ffmpeg-decoder/download-video-chunks",
|
|
200
|
+
(req, res) => handlePostRequest(req, res, async (videoDurations) => {
|
|
201
|
+
const downloadedPaths = await ffmpegBridge.handleDownloadVideoChunks(videoDurations);
|
|
202
|
+
return { success: true, paths: downloadedPaths };
|
|
203
|
+
})
|
|
204
|
+
);
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
}
|
|
208
|
+
var FFmpegBridge = class {
|
|
209
|
+
constructor(ws, config) {
|
|
210
|
+
this.ws = ws;
|
|
211
|
+
this.config = config;
|
|
212
|
+
this.process = null;
|
|
213
|
+
this.handleMessage = async ({ method, data }) => {
|
|
214
|
+
if (method === "start") {
|
|
215
|
+
try {
|
|
216
|
+
this.process = new FFmpegExporterServer({
|
|
217
|
+
...data,
|
|
218
|
+
...this.config
|
|
219
|
+
});
|
|
220
|
+
this.respondSuccess(method, await this.process.start());
|
|
221
|
+
} catch (e) {
|
|
222
|
+
this.respondError(method, e?.message);
|
|
223
|
+
}
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
if (!this.process) {
|
|
227
|
+
this.respondError(method, "The exporting process has not been started.");
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
if (!(method in this.process)) {
|
|
231
|
+
this.respondError(method, `Unknown method: "${method}".`);
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
try {
|
|
235
|
+
this.respondSuccess(method, await this.process[method](data));
|
|
236
|
+
} catch (e) {
|
|
237
|
+
this.respondError(method, e?.message);
|
|
238
|
+
}
|
|
239
|
+
if (method === "kill") {
|
|
240
|
+
this.process = null;
|
|
241
|
+
return;
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
// List of VideoFrameExtractors
|
|
245
|
+
this.videoFrameExtractors = /* @__PURE__ */ new Map();
|
|
246
|
+
ws.on("twick:ffmpeg-exporter", this.handleMessage);
|
|
247
|
+
}
|
|
248
|
+
respondSuccess(method, data = {}) {
|
|
249
|
+
this.ws.send("twick:ffmpeg-exporter-ack", {
|
|
250
|
+
status: "success",
|
|
251
|
+
method,
|
|
252
|
+
data
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
respondError(method, message = "Unknown error.") {
|
|
256
|
+
this.ws.send("twick:ffmpeg-exporter-ack", {
|
|
257
|
+
status: "error",
|
|
258
|
+
method,
|
|
259
|
+
message
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
async handleDownloadVideoChunks(videoDurations) {
|
|
263
|
+
const downloadPromises = videoDurations.map(
|
|
264
|
+
({ src, startTime, endTime }) => VideoFrameExtractor.downloadVideoChunk(src, startTime, endTime)
|
|
265
|
+
);
|
|
266
|
+
await Promise.all(downloadPromises);
|
|
267
|
+
}
|
|
268
|
+
async handleDecodeVideoFrame(data) {
|
|
269
|
+
const typedData = data;
|
|
270
|
+
const id = typedData.filePath + "-" + typedData.id;
|
|
271
|
+
let extractor = this.videoFrameExtractors.get(id);
|
|
272
|
+
const frameDuration = 1 / typedData.fps;
|
|
273
|
+
const isOldFrame = extractor && Math.abs(typedData.startTime - extractor.getLastTime()) < frameDuration / 2;
|
|
274
|
+
if (isOldFrame) {
|
|
275
|
+
const frame2 = extractor.getLastFrame();
|
|
276
|
+
return {
|
|
277
|
+
frame: frame2,
|
|
278
|
+
width: extractor.getWidth(),
|
|
279
|
+
height: extractor.getHeight()
|
|
280
|
+
};
|
|
281
|
+
}
|
|
282
|
+
if (extractor && typedData.startTime + frameDuration < extractor.getTime()) {
|
|
283
|
+
extractor.destroy();
|
|
284
|
+
this.videoFrameExtractors.delete(id);
|
|
285
|
+
extractor = void 0;
|
|
286
|
+
}
|
|
287
|
+
if (extractor && typedData.startTime > extractor.getTime() + frameDuration) {
|
|
288
|
+
extractor.destroy();
|
|
289
|
+
this.videoFrameExtractors.delete(id);
|
|
290
|
+
extractor = void 0;
|
|
291
|
+
}
|
|
292
|
+
if (!extractor) {
|
|
293
|
+
extractor = new VideoFrameExtractor(
|
|
294
|
+
data.filePath,
|
|
295
|
+
data.startTime,
|
|
296
|
+
data.fps,
|
|
297
|
+
data.duration
|
|
298
|
+
);
|
|
299
|
+
this.videoFrameExtractors.set(id, extractor);
|
|
300
|
+
}
|
|
301
|
+
const frame = await extractor.popImage();
|
|
302
|
+
return {
|
|
303
|
+
frame,
|
|
304
|
+
width: extractor.getWidth(),
|
|
305
|
+
height: extractor.getHeight()
|
|
306
|
+
};
|
|
307
|
+
}
|
|
308
|
+
async handleRenderFinished() {
|
|
309
|
+
this.videoFrameExtractors.forEach((extractor) => {
|
|
310
|
+
extractor.destroy();
|
|
311
|
+
const localFile = VideoFrameExtractor.downloadedVideoMap.get(
|
|
312
|
+
extractor.filePath
|
|
313
|
+
)?.localPath;
|
|
314
|
+
if (localFile && existsSync(localFile)) {
|
|
315
|
+
unlinkSync(localFile);
|
|
316
|
+
}
|
|
317
|
+
});
|
|
318
|
+
this.videoFrameExtractors.clear();
|
|
319
|
+
}
|
|
320
|
+
};
|
|
321
|
+
|
|
322
|
+
// src/partials/imageExporter.ts
|
|
323
|
+
import fs3 from "fs";
|
|
324
|
+
import mime from "mime-types";
|
|
325
|
+
import path3 from "path";
|
|
326
|
+
|
|
327
|
+
// src/openInExplorer.ts
|
|
328
|
+
import { execSync, spawn } from "child_process";
|
|
329
|
+
import { platform } from "os";
|
|
330
|
+
function openInExplorer(file) {
|
|
331
|
+
let command = null;
|
|
332
|
+
let args = [file];
|
|
333
|
+
const os3 = platform();
|
|
334
|
+
switch (os3) {
|
|
335
|
+
case "win32":
|
|
336
|
+
command = "explorer";
|
|
337
|
+
break;
|
|
338
|
+
case "linux":
|
|
339
|
+
if (isRunningOnWSL()) {
|
|
340
|
+
command = "bash";
|
|
341
|
+
args = ["-c", `cd ${file} && explorer.exe .`];
|
|
342
|
+
} else {
|
|
343
|
+
command = "xdg-open";
|
|
344
|
+
}
|
|
345
|
+
break;
|
|
346
|
+
case "darwin":
|
|
347
|
+
command = "open";
|
|
348
|
+
break;
|
|
349
|
+
}
|
|
350
|
+
if (command) {
|
|
351
|
+
spawn(command, args, { detached: true }).unref();
|
|
352
|
+
} else {
|
|
353
|
+
console.warn(`Unsupported OS: ${os3}`);
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
function isRunningOnWSL() {
|
|
357
|
+
try {
|
|
358
|
+
const uname = execSync("uname -a").toString().toLowerCase();
|
|
359
|
+
return uname.includes("microsoft");
|
|
360
|
+
} catch (error) {
|
|
361
|
+
console.error(`exec error: ${error}`);
|
|
362
|
+
return false;
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
// src/partials/imageExporter.ts
|
|
367
|
+
function exporterPlugin({ outputPath }) {
|
|
368
|
+
return {
|
|
369
|
+
name: "twick:exporter",
|
|
370
|
+
configureServer(server) {
|
|
371
|
+
server.middlewares.use((req, res, next) => {
|
|
372
|
+
if (req.url === "/__open-output-path") {
|
|
373
|
+
if (!fs3.existsSync(outputPath)) {
|
|
374
|
+
fs3.mkdirSync(outputPath, { recursive: true });
|
|
375
|
+
}
|
|
376
|
+
openInExplorer(outputPath);
|
|
377
|
+
res.end();
|
|
378
|
+
return;
|
|
379
|
+
}
|
|
380
|
+
next();
|
|
381
|
+
});
|
|
382
|
+
server.ws.on(
|
|
383
|
+
"twick:export",
|
|
384
|
+
async ({ data, frame, sceneFrame, subDirectories, mimeType, groupByScene }, client) => {
|
|
385
|
+
const name = (groupByScene ? sceneFrame : frame).toString().padStart(6, "0");
|
|
386
|
+
const extension = mime.extension(mimeType);
|
|
387
|
+
const outputFilePath = path3.join(
|
|
388
|
+
outputPath,
|
|
389
|
+
...subDirectories,
|
|
390
|
+
`${name}.${extension}`
|
|
391
|
+
);
|
|
392
|
+
const outputDirectory = path3.dirname(outputFilePath);
|
|
393
|
+
if (!fs3.existsSync(outputDirectory)) {
|
|
394
|
+
fs3.mkdirSync(outputDirectory, { recursive: true });
|
|
395
|
+
}
|
|
396
|
+
const base64Data = data.slice(data.indexOf(",") + 1);
|
|
397
|
+
await fs3.promises.writeFile(outputFilePath, base64Data, {
|
|
398
|
+
encoding: "base64"
|
|
399
|
+
});
|
|
400
|
+
client.send("twick:export-ack", { frame });
|
|
401
|
+
}
|
|
402
|
+
);
|
|
403
|
+
}
|
|
404
|
+
};
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
// src/partials/meta.ts
|
|
408
|
+
import fs4 from "fs";
|
|
409
|
+
import path4 from "path";
|
|
410
|
+
function metaPlugin() {
|
|
411
|
+
const timeStamps = {};
|
|
412
|
+
let config;
|
|
413
|
+
return {
|
|
414
|
+
name: "twick:meta",
|
|
415
|
+
configResolved(resolvedConfig) {
|
|
416
|
+
config = resolvedConfig;
|
|
417
|
+
},
|
|
418
|
+
async transform(code, id) {
|
|
419
|
+
const [base] = id.split("?");
|
|
420
|
+
const { name, ext } = path4.posix.parse(base);
|
|
421
|
+
if (ext !== ".meta") {
|
|
422
|
+
return;
|
|
423
|
+
}
|
|
424
|
+
const sourceFile = config.command === "build" ? false : JSON.stringify(id);
|
|
425
|
+
return `import {MetaFile} from '@twick/core';
|
|
426
|
+
let meta;
|
|
427
|
+
if (import.meta.hot) {
|
|
428
|
+
meta = import.meta.hot.data.meta;
|
|
429
|
+
}
|
|
430
|
+
meta ??= new MetaFile('${name}', ${sourceFile});
|
|
431
|
+
if (import.meta.hot) {
|
|
432
|
+
import.meta.hot.accept();
|
|
433
|
+
import.meta.hot.data.meta = meta;
|
|
434
|
+
}
|
|
435
|
+
meta.loadData(${code});
|
|
436
|
+
export default meta;
|
|
437
|
+
`;
|
|
438
|
+
},
|
|
439
|
+
configureServer(server) {
|
|
440
|
+
server.ws.on("twick:meta", async ({ source, data }, client) => {
|
|
441
|
+
if (source.startsWith("\0")) {
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
timeStamps[source] = Date.now();
|
|
445
|
+
if (!process.env.DONT_WRITE_TO_META_FILES) {
|
|
446
|
+
await fs4.promises.writeFile(
|
|
447
|
+
source,
|
|
448
|
+
JSON.stringify(data, void 0, 2),
|
|
449
|
+
"utf8"
|
|
450
|
+
);
|
|
451
|
+
}
|
|
452
|
+
client.send("twick:meta-ack", { source });
|
|
453
|
+
});
|
|
454
|
+
},
|
|
455
|
+
handleHotUpdate(ctx) {
|
|
456
|
+
const now = Date.now();
|
|
457
|
+
const modules = [];
|
|
458
|
+
for (const module of ctx.modules) {
|
|
459
|
+
if (module.file !== null && timeStamps[module.file] && timeStamps[module.file] + 1e3 > now) {
|
|
460
|
+
continue;
|
|
461
|
+
}
|
|
462
|
+
modules.push(module);
|
|
463
|
+
}
|
|
464
|
+
return modules;
|
|
465
|
+
}
|
|
466
|
+
};
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
// src/partials/metrics.ts
|
|
470
|
+
import { EventName, sendEvent } from "@twick/telemetry";
|
|
471
|
+
function metricsPlugin() {
|
|
472
|
+
return {
|
|
473
|
+
name: "twick:metrics",
|
|
474
|
+
async configResolved() {
|
|
475
|
+
sendEvent(EventName.ServerStarted);
|
|
476
|
+
}
|
|
477
|
+
};
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
// src/partials/projects.ts
|
|
481
|
+
function projectsPlugin({
|
|
482
|
+
buildForEditor,
|
|
483
|
+
projects
|
|
484
|
+
}) {
|
|
485
|
+
return {
|
|
486
|
+
name: "twick:project",
|
|
487
|
+
config(config) {
|
|
488
|
+
return {
|
|
489
|
+
build: {
|
|
490
|
+
target: buildForEditor ? "esnext" : "modules",
|
|
491
|
+
assetsDir: "./",
|
|
492
|
+
rollupOptions: {
|
|
493
|
+
preserveEntrySignatures: "strict",
|
|
494
|
+
input: Object.fromEntries(
|
|
495
|
+
projects.list.map((project) => [project.name, project.url])
|
|
496
|
+
)
|
|
497
|
+
}
|
|
498
|
+
},
|
|
499
|
+
server: {
|
|
500
|
+
port: config?.server?.port ?? 9e3
|
|
501
|
+
},
|
|
502
|
+
esbuild: {
|
|
503
|
+
jsx: "automatic",
|
|
504
|
+
jsxImportSource: "@twick/2d/lib"
|
|
505
|
+
},
|
|
506
|
+
optimizeDeps: {
|
|
507
|
+
entries: projects.list.map((project) => project.url),
|
|
508
|
+
exclude: ["preact", "preact/*", "@preact/signals"]
|
|
509
|
+
}
|
|
510
|
+
};
|
|
511
|
+
}
|
|
512
|
+
};
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
// src/partials/rive.ts
|
|
516
|
+
import * as fs5 from "fs";
|
|
517
|
+
import path5 from "path";
|
|
518
|
+
import { Readable as Readable2 } from "stream";
|
|
519
|
+
async function getRiveWasmPath() {
|
|
520
|
+
try {
|
|
521
|
+
const packageJsonPath = __require.resolve(
|
|
522
|
+
"@rive-app/canvas-advanced/package.json"
|
|
523
|
+
);
|
|
524
|
+
const packageDir = path5.dirname(packageJsonPath);
|
|
525
|
+
const wasmPath = path5.join(packageDir, "rive.wasm");
|
|
526
|
+
await fs5.promises.access(wasmPath, fs5.constants.F_OK);
|
|
527
|
+
return wasmPath;
|
|
528
|
+
} catch (error) {
|
|
529
|
+
console.error("Error finding Rive WASM file:", error);
|
|
530
|
+
throw new Error("Could not find Rive WASM file");
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
function rivePlugin() {
|
|
534
|
+
return {
|
|
535
|
+
name: "twick:rive-wasm",
|
|
536
|
+
configureServer(server) {
|
|
537
|
+
server.middlewares.use(async (req, res, next) => {
|
|
538
|
+
if (req.url && req.url === "/@rive-wasm") {
|
|
539
|
+
try {
|
|
540
|
+
const wasmPath = await getRiveWasmPath();
|
|
541
|
+
const file = await fs5.promises.readFile(wasmPath);
|
|
542
|
+
res.setHeader("Content-Type", "application/wasm");
|
|
543
|
+
Readable2.from(file).pipe(res);
|
|
544
|
+
} catch (error) {
|
|
545
|
+
console.error("Error serving Rive WASM file:", error);
|
|
546
|
+
res.statusCode = 500;
|
|
547
|
+
res.end("Error serving Rive WASM file");
|
|
548
|
+
}
|
|
549
|
+
return;
|
|
550
|
+
}
|
|
551
|
+
next();
|
|
552
|
+
});
|
|
553
|
+
}
|
|
554
|
+
};
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
// src/partials/settings.ts
|
|
558
|
+
import fs6 from "fs";
|
|
559
|
+
import os from "os";
|
|
560
|
+
import path6 from "path";
|
|
561
|
+
function settingsPlugin() {
|
|
562
|
+
const settingsId = "virtual:settings.meta";
|
|
563
|
+
const resolvedSettingsId = "\0" + settingsId;
|
|
564
|
+
const settingsPath = path6.resolve(os.homedir(), ".twick/settings.json");
|
|
565
|
+
const outputDirectory = path6.dirname(settingsPath);
|
|
566
|
+
return {
|
|
567
|
+
name: "twick:settings",
|
|
568
|
+
resolveId(id) {
|
|
569
|
+
if (id === settingsId) {
|
|
570
|
+
return resolvedSettingsId;
|
|
571
|
+
}
|
|
572
|
+
},
|
|
573
|
+
async load(id) {
|
|
574
|
+
if (id === resolvedSettingsId) {
|
|
575
|
+
let parsed = {};
|
|
576
|
+
try {
|
|
577
|
+
parsed = JSON.parse(await fs6.promises.readFile(settingsPath, "utf8"));
|
|
578
|
+
} catch (_) {
|
|
579
|
+
}
|
|
580
|
+
return JSON.stringify(parsed);
|
|
581
|
+
}
|
|
582
|
+
},
|
|
583
|
+
configureServer(server) {
|
|
584
|
+
server.ws.on("twick:meta", async ({ source, data }, client) => {
|
|
585
|
+
if (source !== resolvedSettingsId) {
|
|
586
|
+
return;
|
|
587
|
+
}
|
|
588
|
+
await fs6.promises.mkdir(outputDirectory, { recursive: true });
|
|
589
|
+
const newData = JSON.stringify(data, void 0, 2);
|
|
590
|
+
let oldData = "";
|
|
591
|
+
try {
|
|
592
|
+
oldData = await fs6.promises.readFile(settingsPath, "utf8");
|
|
593
|
+
} catch (_) {
|
|
594
|
+
}
|
|
595
|
+
if (oldData !== newData) {
|
|
596
|
+
await Promise.all([
|
|
597
|
+
fs6.promises.writeFile(settingsPath, newData, "utf8"),
|
|
598
|
+
// Invalidate the module so that the settings are up-to-date next
|
|
599
|
+
// time the browser is refreshed.
|
|
600
|
+
server.moduleGraph.getModuleByUrl(source).then((module) => {
|
|
601
|
+
if (module) {
|
|
602
|
+
server.moduleGraph.invalidateModule(module);
|
|
603
|
+
}
|
|
604
|
+
})
|
|
605
|
+
]);
|
|
606
|
+
}
|
|
607
|
+
client.send("twick:meta-ack", { source });
|
|
608
|
+
});
|
|
609
|
+
}
|
|
610
|
+
};
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
// src/partials/wasmExporter.ts
|
|
614
|
+
import { IncomingForm } from "formidable";
|
|
615
|
+
import * as fs7 from "fs";
|
|
616
|
+
import * as os2 from "os";
|
|
617
|
+
import path7 from "path";
|
|
618
|
+
import { Readable as Readable3 } from "stream";
|
|
619
|
+
function wasmExporterPlugin() {
|
|
620
|
+
return {
|
|
621
|
+
name: "twick:mp4-wasm",
|
|
622
|
+
configureServer(server) {
|
|
623
|
+
server.middlewares.use(async (req, res, next) => {
|
|
624
|
+
if (req.url && req.url === "/@mp4-wasm") {
|
|
625
|
+
const pathNew = path7.dirname(__require.resolve("mp4-wasm"));
|
|
626
|
+
const filePath = path7.resolve(pathNew, "mp4.wasm");
|
|
627
|
+
const file = await fs7.promises.readFile(filePath);
|
|
628
|
+
res.setHeader("Content-Type", "application/wasm");
|
|
629
|
+
Readable3.from(file).pipe(res);
|
|
630
|
+
return;
|
|
631
|
+
}
|
|
632
|
+
next();
|
|
633
|
+
});
|
|
634
|
+
server.middlewares.use("/uploadVideoFile", async (req, res) => {
|
|
635
|
+
if (req.method === "POST") {
|
|
636
|
+
const form = new IncomingForm({ maxFileSize: 1024 * 1024 * 1024 * 10 });
|
|
637
|
+
form.parse(req, async (err, fields, files) => {
|
|
638
|
+
if (err) {
|
|
639
|
+
console.error("Error parsing form:", err);
|
|
640
|
+
res.statusCode = 500;
|
|
641
|
+
res.end();
|
|
642
|
+
return;
|
|
643
|
+
}
|
|
644
|
+
try {
|
|
645
|
+
const tempDir = fields.tempDir[0];
|
|
646
|
+
const file = files.file[0];
|
|
647
|
+
const outputPath = path7.join(os2.tmpdir(), tempDir, "visuals.mp4");
|
|
648
|
+
const writeStream = fs7.createWriteStream(outputPath);
|
|
649
|
+
await new Promise((resolve, reject) => {
|
|
650
|
+
fs7.createReadStream(file.filepath).pipe(writeStream).on("finish", resolve).on("error", reject);
|
|
651
|
+
});
|
|
652
|
+
res.statusCode = 200;
|
|
653
|
+
res.end();
|
|
654
|
+
} catch (err2) {
|
|
655
|
+
console.error("Error uploading video:", err2);
|
|
656
|
+
res.statusCode = 500;
|
|
657
|
+
res.end();
|
|
658
|
+
}
|
|
659
|
+
});
|
|
660
|
+
}
|
|
661
|
+
});
|
|
662
|
+
}
|
|
663
|
+
};
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
// src/partials/webgl.ts
|
|
667
|
+
import fs8 from "fs";
|
|
668
|
+
import path8 from "path";
|
|
669
|
+
import { SourceNode } from "source-map";
|
|
670
|
+
import { normalizePath } from "vite";
|
|
671
|
+
var GLSL_EXTENSION_REGEX = /\.glsl(?:$|\?)/;
|
|
672
|
+
var INCLUDE_REGEX = /^#include "([^"]+)"/;
|
|
673
|
+
function webglPlugin() {
|
|
674
|
+
let config;
|
|
675
|
+
return {
|
|
676
|
+
name: "twick:webgl",
|
|
677
|
+
configResolved(resolvedConfig) {
|
|
678
|
+
config = resolvedConfig;
|
|
679
|
+
},
|
|
680
|
+
async transform(code, id) {
|
|
681
|
+
if (!GLSL_EXTENSION_REGEX.test(id)) {
|
|
682
|
+
return;
|
|
683
|
+
}
|
|
684
|
+
const [base, query] = id.split("?");
|
|
685
|
+
const { dir } = path8.posix.parse(base);
|
|
686
|
+
const params = new URLSearchParams(query);
|
|
687
|
+
if (params.has("raw")) {
|
|
688
|
+
return;
|
|
689
|
+
}
|
|
690
|
+
const context = {
|
|
691
|
+
rootDir: dir,
|
|
692
|
+
fileStack: [],
|
|
693
|
+
includeMap: /* @__PURE__ */ new Map(),
|
|
694
|
+
watchFile: (file) => this.addWatchFile(file),
|
|
695
|
+
resolve: async (source, importer) => {
|
|
696
|
+
const resolved = await this.resolve(source, importer);
|
|
697
|
+
return resolved?.id;
|
|
698
|
+
}
|
|
699
|
+
};
|
|
700
|
+
const glslSource = await resolveGlsl(context, id, code);
|
|
701
|
+
const sourceUrl = normalizePath(path8.relative(config.root, base));
|
|
702
|
+
const result = glslSource.toStringWithSourceMap();
|
|
703
|
+
const map = result.map.toJSON();
|
|
704
|
+
map.includeMap = Object.fromEntries(context.includeMap);
|
|
705
|
+
return {
|
|
706
|
+
map,
|
|
707
|
+
code: `export default \`${result.code}
|
|
708
|
+
//# sourceURL=${sourceUrl}\`;`
|
|
709
|
+
};
|
|
710
|
+
}
|
|
711
|
+
};
|
|
712
|
+
}
|
|
713
|
+
async function resolveGlsl(context, id, code) {
|
|
714
|
+
const lines = code.split(/\r?\n/);
|
|
715
|
+
const source = new SourceNode(1, 0, "", "");
|
|
716
|
+
if (context.fileStack.includes(id)) {
|
|
717
|
+
throw new Error(
|
|
718
|
+
`Circular dependency detected: ${context.fileStack.join(" -> ")}`
|
|
719
|
+
);
|
|
720
|
+
}
|
|
721
|
+
context.fileStack.push(id);
|
|
722
|
+
const sourceMapId = path8.posix.relative(context.rootDir, id);
|
|
723
|
+
for (let i = 0; i < lines.length; i++) {
|
|
724
|
+
const line = lines[i];
|
|
725
|
+
const match = line.match(INCLUDE_REGEX);
|
|
726
|
+
if (match) {
|
|
727
|
+
const childId = await context.resolve(match[1], id);
|
|
728
|
+
if (!childId) {
|
|
729
|
+
continue;
|
|
730
|
+
}
|
|
731
|
+
const childSourceMapId = path8.posix.relative(context.rootDir, childId);
|
|
732
|
+
if (context.includeMap.has(childSourceMapId)) {
|
|
733
|
+
continue;
|
|
734
|
+
}
|
|
735
|
+
context.includeMap.set(childSourceMapId, [sourceMapId, i + 1]);
|
|
736
|
+
context.watchFile(childId);
|
|
737
|
+
const childCode = await fs8.promises.readFile(childId, "utf-8");
|
|
738
|
+
source.add(await resolveGlsl(context, childId, childCode));
|
|
739
|
+
} else {
|
|
740
|
+
let j = 0;
|
|
741
|
+
for (; j < line.length; j++) {
|
|
742
|
+
source.add(new SourceNode(i + 1, j, sourceMapId, line[j]));
|
|
743
|
+
}
|
|
744
|
+
source.add(new SourceNode(i + 1, j, sourceMapId, "\n"));
|
|
745
|
+
}
|
|
746
|
+
}
|
|
747
|
+
context.fileStack.pop();
|
|
748
|
+
return source;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
// src/plugins.ts
|
|
752
|
+
var PLUGIN_OPTIONS = /* @__PURE__ */ Symbol.for("@twick/vite-plugin/PLUGIN_OPTIONS");
|
|
753
|
+
function isPlugin(value) {
|
|
754
|
+
return value && typeof value === "object" && PLUGIN_OPTIONS in value;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
// src/utils.ts
|
|
758
|
+
import fg from "fast-glob";
|
|
759
|
+
import fs9 from "fs";
|
|
760
|
+
import path9 from "path";
|
|
761
|
+
function getProjects(project) {
|
|
762
|
+
const list = [];
|
|
763
|
+
const lookup = /* @__PURE__ */ new Map();
|
|
764
|
+
const projectList = expandFilePaths(project);
|
|
765
|
+
for (const url of projectList) {
|
|
766
|
+
const { name, dir } = path9.posix.parse(url);
|
|
767
|
+
const metaFile = `${name}.meta`;
|
|
768
|
+
const metaData = getMeta(path9.join(dir, metaFile));
|
|
769
|
+
const data = { name: metaData?.name ?? name, fileName: name, url };
|
|
770
|
+
list.push(data);
|
|
771
|
+
lookup.set(data.name, data);
|
|
772
|
+
}
|
|
773
|
+
return { list, lookup };
|
|
774
|
+
}
|
|
775
|
+
function expandFilePaths(filePaths) {
|
|
776
|
+
const expandedFilePaths = [];
|
|
777
|
+
for (const filePath of typeof filePaths === "string" ? [filePaths] : filePaths) {
|
|
778
|
+
if (fg.isDynamicPattern(filePath)) {
|
|
779
|
+
const matchingFilePaths = fg.sync(filePath, { onlyFiles: true });
|
|
780
|
+
expandedFilePaths.push(...matchingFilePaths);
|
|
781
|
+
} else {
|
|
782
|
+
expandedFilePaths.push(filePath);
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
return expandedFilePaths;
|
|
786
|
+
}
|
|
787
|
+
function getMeta(metaPath) {
|
|
788
|
+
if (fs9.existsSync(metaPath)) {
|
|
789
|
+
return JSON.parse(fs9.readFileSync(metaPath, "utf8"));
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
// src/main.ts
|
|
794
|
+
var main_default = ({
|
|
795
|
+
project = "./src/project.ts",
|
|
796
|
+
output = "./output",
|
|
797
|
+
bufferedAssets = /^$/,
|
|
798
|
+
editor = "@twick/ui",
|
|
799
|
+
buildForEditor
|
|
800
|
+
} = {}) => {
|
|
801
|
+
const plugins = [];
|
|
802
|
+
const outputPath = path10.resolve(output);
|
|
803
|
+
const projects = getProjects(project);
|
|
804
|
+
return [
|
|
805
|
+
{
|
|
806
|
+
name: "twick",
|
|
807
|
+
async configResolved(resolvedConfig) {
|
|
808
|
+
plugins.push(
|
|
809
|
+
...resolvedConfig.plugins.filter(isPlugin).map((plugin) => plugin[PLUGIN_OPTIONS])
|
|
810
|
+
);
|
|
811
|
+
await Promise.all(
|
|
812
|
+
plugins.map(
|
|
813
|
+
(plugin) => plugin.config?.({
|
|
814
|
+
output: outputPath,
|
|
815
|
+
projects: projects.list
|
|
816
|
+
})
|
|
817
|
+
)
|
|
818
|
+
);
|
|
819
|
+
}
|
|
820
|
+
},
|
|
821
|
+
metaPlugin(),
|
|
822
|
+
settingsPlugin(),
|
|
823
|
+
exporterPlugin({ outputPath }),
|
|
824
|
+
ffmpegBridgePlugin({ output: outputPath }),
|
|
825
|
+
editorPlugin({ editor, projects }),
|
|
826
|
+
projectsPlugin({ projects, plugins, buildForEditor }),
|
|
827
|
+
assetsPlugin({ bufferedAssets }),
|
|
828
|
+
wasmExporterPlugin(),
|
|
829
|
+
rivePlugin(),
|
|
830
|
+
webglPlugin(),
|
|
831
|
+
metricsPlugin()
|
|
832
|
+
];
|
|
833
|
+
};
|
|
834
|
+
|
|
835
|
+
// src/index.ts
|
|
836
|
+
var index_default = main_default;
|
|
837
|
+
export {
|
|
838
|
+
PLUGIN_OPTIONS,
|
|
839
|
+
index_default as default,
|
|
840
|
+
isPlugin
|
|
841
|
+
};
|
|
842
|
+
//# sourceMappingURL=index.js.map
|