xpine 0.0.42 → 0.0.44
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 +16 -0
- package/dist/index.js +142 -119
- package/dist/src/express.d.ts.map +1 -1
- package/dist/src/scripts/build.d.ts.map +1 -1
- package/dist/src/scripts/xpine-build.js +47 -37
- package/dist/src/scripts/xpine-dev.js +45 -35
- package/dist/src/static/spa.js +4 -1
- package/dist/src/util/regex.d.ts +3 -0
- package/dist/src/util/regex.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,6 +43,22 @@ setupEnv also supports AWS secrets manager. Simply add SECRETS_NAME=your_aws_sec
|
|
|
43
43
|
|
|
44
44
|
`import { createXPineRouter } from 'xpine';`
|
|
45
45
|
|
|
46
|
+
- Catch all routes
|
|
47
|
+
- You can create catch all routes by naming the file _all_.(jsx|tsx|js|ts)
|
|
48
|
+
- You can make static catch all route pages by using the param `0` in the staticPaths config function:
|
|
49
|
+
```
|
|
50
|
+
export const config = {
|
|
51
|
+
staticPaths() {
|
|
52
|
+
return [
|
|
53
|
+
{
|
|
54
|
+
0: 'hello/world',
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
- You can get the route param in your function with req.params[0], such as how express handles catch all routes
|
|
61
|
+
|
|
46
62
|
|
|
47
63
|
### SPA interactivity
|
|
48
64
|
|
package/dist/index.js
CHANGED
|
@@ -269,7 +269,7 @@ function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
|
|
|
269
269
|
value.imports = importText + "\n" + value.imports;
|
|
270
270
|
}
|
|
271
271
|
if ([ts.SyntaxKind.FirstStatement, ts.SyntaxKind.FunctionDeclaration].includes(child.kind)) {
|
|
272
|
-
|
|
272
|
+
const text = child.getText(source);
|
|
273
273
|
if (text.includes("xpineOnLoad")) {
|
|
274
274
|
const body = child?.body?.getText(source) || "";
|
|
275
275
|
value.fn = value.fn + "\n" + body ? `(function() ${body})();` : "";
|
|
@@ -312,7 +312,10 @@ var regex_default = {
|
|
|
312
312
|
endsWithTSX: /\.tsx$/,
|
|
313
313
|
endsWithJSX: /\.jsx$/,
|
|
314
314
|
endsWithFileName: /\.(html|tsx|jsx|js|ts)$/,
|
|
315
|
-
indexFile: /index\.(html|tsx|jsx|js|ts)$/g
|
|
315
|
+
indexFile: /index\.(html|tsx|jsx|js|ts)$/g,
|
|
316
|
+
catchAllRoute: /\/_all_$/g,
|
|
317
|
+
catchAllRouteFilePath: /_all_\.(html|tsx|jsx|js|ts)$/g,
|
|
318
|
+
catchAllRouteFileName: /_all_/g
|
|
316
319
|
};
|
|
317
320
|
|
|
318
321
|
// src/util/config-file.ts
|
|
@@ -383,7 +386,7 @@ function transformTSXFiles(componentData, pageConfigFiles) {
|
|
|
383
386
|
import fs3 from "fs-extra";
|
|
384
387
|
import path4 from "path";
|
|
385
388
|
import builtinModules from "builtin-modules";
|
|
386
|
-
function addDotJS(allPackages2, extensions2,
|
|
389
|
+
function addDotJS(allPackages2, extensions2, isDev2) {
|
|
387
390
|
const allPackagesIncludingNode = allPackages2.concat(builtinModules);
|
|
388
391
|
return {
|
|
389
392
|
name: "add-dot-js",
|
|
@@ -401,7 +404,7 @@ function addDotJS(allPackages2, extensions2, isDev) {
|
|
|
401
404
|
}
|
|
402
405
|
let outputPath = args.path + (existsAsFile ? "" : "/index") + ".js";
|
|
403
406
|
outputPath = args.path.endsWith(".js") || args.path.endsWith(".mjs") ? args.path : outputPath;
|
|
404
|
-
return { path: outputPath + (
|
|
407
|
+
return { path: outputPath + (isDev2 ? `?cache=${Date.now()}` : ""), external: true };
|
|
405
408
|
}
|
|
406
409
|
});
|
|
407
410
|
}
|
|
@@ -482,6 +485,8 @@ import requestIP from "request-ip";
|
|
|
482
485
|
import fs5 from "fs-extra";
|
|
483
486
|
import path5 from "path";
|
|
484
487
|
import EventEmitter from "events";
|
|
488
|
+
var methods = ["get", "post", "put", "patch", "delete"];
|
|
489
|
+
var isDev = process.env.NODE_ENV === "development";
|
|
485
490
|
var OnInitEmitter = class extends EventEmitter {
|
|
486
491
|
};
|
|
487
492
|
var onInitEmitter = new OnInitEmitter();
|
|
@@ -504,92 +509,107 @@ function getAllBuiltRoutes() {
|
|
|
504
509
|
};
|
|
505
510
|
}).filter(Boolean);
|
|
506
511
|
}
|
|
507
|
-
async function
|
|
508
|
-
const
|
|
509
|
-
const
|
|
510
|
-
const
|
|
511
|
-
const
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
const
|
|
517
|
-
|
|
518
|
-
const foundMethod = methods.find((method) => slugRoute.endsWith(`.${method}`));
|
|
519
|
-
const isDynamicRoute = slugRoute.match(regex_default.isDynamicRoute);
|
|
520
|
-
let formattedRouteItem = slugRoute;
|
|
521
|
-
if (foundMethod) formattedRouteItem = formattedRouteItem.split(".").shift();
|
|
522
|
-
if (isDynamicRoute) {
|
|
523
|
-
const result = [...formattedRouteItem.matchAll(regex_default.dynamicRoutes)];
|
|
524
|
-
for (const match of result) {
|
|
525
|
-
formattedRouteItem = formattedRouteItem.replace(match[0], ":" + match[2]);
|
|
526
|
-
}
|
|
512
|
+
async function createRouteFunction(route, configFiles) {
|
|
513
|
+
const isJSX = route.originalRoute.endsWith(".tsx") || route.originalRoute.endsWith(".jsx");
|
|
514
|
+
const slugRoute = route.route.replace(/[ ]/g, "");
|
|
515
|
+
const foundMethod = methods.find((method) => slugRoute.endsWith(`.${method}`));
|
|
516
|
+
const isDynamicRoute = slugRoute.match(regex_default.isDynamicRoute);
|
|
517
|
+
let formattedRouteItem = slugRoute;
|
|
518
|
+
if (foundMethod) formattedRouteItem = formattedRouteItem.split(".").shift();
|
|
519
|
+
if (isDynamicRoute) {
|
|
520
|
+
const result = [...formattedRouteItem.matchAll(regex_default.dynamicRoutes)];
|
|
521
|
+
for (const match of result) {
|
|
522
|
+
formattedRouteItem = formattedRouteItem.replace(match[0], ":" + match[2]);
|
|
527
523
|
}
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
524
|
+
}
|
|
525
|
+
const hasCatchAll = formattedRouteItem.match(regex_default.catchAllRoute);
|
|
526
|
+
if (hasCatchAll) formattedRouteItem = formattedRouteItem.replace(regex_default.catchAllRoute, "/*");
|
|
527
|
+
const componentImport = await import(route.path);
|
|
528
|
+
const componentFn = isDev ? null : componentImport?.default;
|
|
529
|
+
if (componentImport?.config?.onInit) {
|
|
530
|
+
await componentImport.config?.onInit();
|
|
531
|
+
}
|
|
532
|
+
let config2 = {};
|
|
533
|
+
const configFilePaths = getConfigFiles(route.originalRoute, configFiles);
|
|
534
|
+
if (!isDev) {
|
|
535
|
+
config2 = configFilePaths && await getCompleteConfig(configFilePaths, Date.now());
|
|
536
|
+
if (componentImport?.config) {
|
|
537
|
+
config2 = {
|
|
538
|
+
...config2,
|
|
539
|
+
...componentImport.config
|
|
540
|
+
};
|
|
532
541
|
}
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
};
|
|
542
|
+
}
|
|
543
|
+
async function routeFn(req, res) {
|
|
544
|
+
const urlPath = req?.route?.path || "/";
|
|
545
|
+
try {
|
|
546
|
+
const staticPath = routeHasStaticPath(formattedRouteItem, req.params);
|
|
547
|
+
if (staticPath && !isDev) {
|
|
548
|
+
res.sendFile(staticPath);
|
|
549
|
+
return;
|
|
542
550
|
}
|
|
543
|
-
|
|
544
|
-
routeResults.push({
|
|
545
|
-
formattedRouteItem,
|
|
546
|
-
foundMethod,
|
|
547
|
-
route
|
|
548
|
-
});
|
|
549
|
-
router[foundMethod || "get"](formattedRouteItem, async (req, res) => {
|
|
550
|
-
const urlPath = req?.route?.path || "/";
|
|
551
|
-
try {
|
|
552
|
-
const staticPath = routeHasStaticPath(formattedRouteItem, req.params);
|
|
553
|
-
if (staticPath && !isDev) {
|
|
554
|
-
res.sendFile(staticPath);
|
|
555
|
-
return;
|
|
556
|
-
}
|
|
557
|
-
if (componentFn && !isDev) {
|
|
558
|
-
if (isJSX) {
|
|
559
|
-
const data = config2?.data ? await config2.data(req) : null;
|
|
560
|
-
const originalResult = await componentFn({ req, res, data, routePath: urlPath });
|
|
561
|
-
const output = config2?.wrapper ? await config2.wrapper({ req, children: originalResult, config: config2, data, routePath: urlPath }) : originalResult;
|
|
562
|
-
res.send(doctypeHTML + output);
|
|
563
|
-
} else {
|
|
564
|
-
await componentFn(req, res);
|
|
565
|
-
}
|
|
566
|
-
return;
|
|
567
|
-
}
|
|
568
|
-
await triggerXPineOnLoad(true);
|
|
569
|
-
const componentImportDev = await import(route.path + `?cache=${Date.now()}`);
|
|
570
|
-
const componentFnDev = componentImportDev.default;
|
|
571
|
-
onInitEmitter.emit("triggerOnInit", getAllBuiltRoutes());
|
|
551
|
+
if (componentFn && !isDev) {
|
|
572
552
|
if (isJSX) {
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
...config3,
|
|
577
|
-
...componentImportDev.config
|
|
578
|
-
};
|
|
579
|
-
}
|
|
580
|
-
const data = config3?.data ? await config3.data(req) : null;
|
|
581
|
-
const originalResult = await componentFnDev({ req, res, data, config: config3, routePath: urlPath });
|
|
582
|
-
const output = config3?.wrapper ? await config3.wrapper({ req, children: originalResult, config: config3, data, routePath: urlPath }) : originalResult;
|
|
583
|
-
context.clear();
|
|
553
|
+
const data = config2?.data ? await config2.data(req) : null;
|
|
554
|
+
const originalResult = await componentFn({ req, res, data, routePath: urlPath });
|
|
555
|
+
const output = config2?.wrapper ? await config2.wrapper({ req, children: originalResult, config: config2, data, routePath: urlPath }) : originalResult;
|
|
584
556
|
res.send(doctypeHTML + output);
|
|
585
557
|
} else {
|
|
586
|
-
await
|
|
558
|
+
await componentFn(req, res);
|
|
587
559
|
}
|
|
588
|
-
|
|
589
|
-
console.error(err);
|
|
590
|
-
res.status(err?.status || 500).send(err?.message || "Error");
|
|
560
|
+
return;
|
|
591
561
|
}
|
|
592
|
-
|
|
562
|
+
await triggerXPineOnLoad(true);
|
|
563
|
+
const componentImportDev = await import(route.path + `?cache=${Date.now()}`);
|
|
564
|
+
const componentFnDev = componentImportDev.default;
|
|
565
|
+
onInitEmitter.emit("triggerOnInit", getAllBuiltRoutes());
|
|
566
|
+
if (isJSX) {
|
|
567
|
+
let config3 = configFilePaths && await getCompleteConfig(configFilePaths, Date.now());
|
|
568
|
+
if (componentImportDev?.config) {
|
|
569
|
+
config3 = {
|
|
570
|
+
...config3,
|
|
571
|
+
...componentImportDev.config
|
|
572
|
+
};
|
|
573
|
+
}
|
|
574
|
+
const data = config3?.data ? await config3.data(req) : null;
|
|
575
|
+
const originalResult = await componentFnDev({ req, res, data, config: config3, routePath: urlPath });
|
|
576
|
+
const output = config3?.wrapper ? await config3.wrapper({ req, children: originalResult, config: config3, data, routePath: urlPath }) : originalResult;
|
|
577
|
+
context.clear();
|
|
578
|
+
res.send(doctypeHTML + output);
|
|
579
|
+
} else {
|
|
580
|
+
await componentFnDev(req, res);
|
|
581
|
+
}
|
|
582
|
+
} catch (err) {
|
|
583
|
+
console.error(err);
|
|
584
|
+
res.status(err?.status || 500).send(err?.message || "Error");
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
return {
|
|
588
|
+
formattedRouteItem,
|
|
589
|
+
foundMethod,
|
|
590
|
+
route,
|
|
591
|
+
routeFn
|
|
592
|
+
};
|
|
593
|
+
}
|
|
594
|
+
async function createRouter() {
|
|
595
|
+
const router = express.Router();
|
|
596
|
+
const routeMap = getAllBuiltRoutes();
|
|
597
|
+
const routeResults = [];
|
|
598
|
+
const configFiles = globSync(config.pagesDir + "/**/+config.{tsx,ts}");
|
|
599
|
+
await triggerXPineOnLoad();
|
|
600
|
+
for (const route of routeMap) {
|
|
601
|
+
try {
|
|
602
|
+
const { formattedRouteItem, foundMethod, routeFn } = await createRouteFunction(route, configFiles);
|
|
603
|
+
router[foundMethod || "get"](formattedRouteItem, routeFn);
|
|
604
|
+
routeResults.push({
|
|
605
|
+
formattedRouteItem,
|
|
606
|
+
foundMethod,
|
|
607
|
+
route,
|
|
608
|
+
routeFn
|
|
609
|
+
});
|
|
610
|
+
} catch (err) {
|
|
611
|
+
console.error(err);
|
|
612
|
+
}
|
|
593
613
|
}
|
|
594
614
|
return {
|
|
595
615
|
router,
|
|
@@ -618,15 +638,11 @@ async function createXPineRouter(app, beforeErrorRoute) {
|
|
|
618
638
|
router(req, res, next);
|
|
619
639
|
});
|
|
620
640
|
const found404 = routeResults?.find((item) => item?.formattedRouteItem === "/404");
|
|
621
|
-
const import404 = process.env.NODE_ENV === "development" || !found404 ? null : (await import(found404.route.path)).default;
|
|
622
641
|
if (beforeErrorRoute) beforeErrorRoute(app);
|
|
623
642
|
app.use(async function(req, res) {
|
|
624
643
|
res.status(404);
|
|
625
|
-
if (
|
|
626
|
-
|
|
627
|
-
} else if (found404 && process.env.NODE_ENV === "development") {
|
|
628
|
-
const import404Item = (await import(found404.route.path + `?cache=${Date.now()}`)).default;
|
|
629
|
-
res.send(doctypeHTML + await import404Item(req, res));
|
|
644
|
+
if (found404?.routeFn) {
|
|
645
|
+
found404?.routeFn(req, res);
|
|
630
646
|
} else {
|
|
631
647
|
res.send("Error");
|
|
632
648
|
}
|
|
@@ -637,6 +653,7 @@ function routeHasStaticPath(route, params) {
|
|
|
637
653
|
let routeToStaticPath = route;
|
|
638
654
|
for (const [key, value] of paramEntries) {
|
|
639
655
|
routeToStaticPath = routeToStaticPath.replace(`:${key}`, value);
|
|
656
|
+
if (key === "0") routeToStaticPath = routeToStaticPath.replace(/\/\*/g, `/${value}`);
|
|
640
657
|
}
|
|
641
658
|
routeToStaticPath += "/index.html";
|
|
642
659
|
const outputPath = path5.join(config.distPagesDir, routeToStaticPath);
|
|
@@ -694,19 +711,19 @@ var plugin2 = (opts = {}) => {
|
|
|
694
711
|
},
|
|
695
712
|
OnceExit(root) {
|
|
696
713
|
root.append([
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
714
|
+
":root {",
|
|
715
|
+
'--active-breakpoint: "default";',
|
|
716
|
+
"}"
|
|
700
717
|
].join(""));
|
|
701
718
|
const nodeValuesMapped = nodeValues.sort((a, b) => {
|
|
702
719
|
return Number(a.value.replace(/[^0-9]/g, "")) - Number(b.value.replace(/[^0-9]/g, ""));
|
|
703
720
|
}).map(({ breakpoint, value }) => {
|
|
704
721
|
return [
|
|
705
722
|
`@media (min-width: ${value}) {`,
|
|
706
|
-
|
|
723
|
+
":root {",
|
|
707
724
|
`--active-breakpoint: "${breakpoint}";`,
|
|
708
|
-
|
|
709
|
-
|
|
725
|
+
"}",
|
|
726
|
+
"}"
|
|
710
727
|
].join("");
|
|
711
728
|
});
|
|
712
729
|
for (const value of nodeValuesMapped) {
|
|
@@ -742,28 +759,28 @@ var packageJson = JSON.parse(fs7.readFileSync(config.packageJsonPath, "utf-8"));
|
|
|
742
759
|
var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
|
|
743
760
|
var xpineDistDir = getXPineDistDir();
|
|
744
761
|
async function buildApp(args) {
|
|
745
|
-
const
|
|
762
|
+
const isDev2 = args?.isDev || false;
|
|
746
763
|
const removePreviousBuild = args?.removePreviousBuild || false;
|
|
747
764
|
const disableTailwind = args?.disableTailwind || false;
|
|
748
765
|
try {
|
|
749
766
|
if (removePreviousBuild) fs7.removeSync(config.distDir);
|
|
750
767
|
const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
|
|
751
|
-
const { componentData, dataFiles } = await buildAppFiles(srcDirFiles,
|
|
768
|
+
const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev2);
|
|
752
769
|
const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
|
|
753
|
-
await buildClientSideFiles([alpineDataFile],
|
|
770
|
+
await buildClientSideFiles([alpineDataFile], isDev2);
|
|
754
771
|
fs7.removeSync(config.distTempFolder);
|
|
755
772
|
await buildCSS(disableTailwind);
|
|
756
773
|
await buildPublicFolderSymlinks();
|
|
757
|
-
await buildOnLoadFile(componentData,
|
|
758
|
-
if (!
|
|
759
|
-
if (!
|
|
760
|
-
if (!
|
|
774
|
+
await buildOnLoadFile(componentData, isDev2);
|
|
775
|
+
if (!isDev2) await triggerXPineOnLoad();
|
|
776
|
+
if (!isDev2) await buildFilesWithConfigs(componentData);
|
|
777
|
+
if (!isDev2) context.clear();
|
|
761
778
|
} catch (err) {
|
|
762
779
|
console.error("Build failed");
|
|
763
780
|
console.error(err);
|
|
764
781
|
}
|
|
765
782
|
}
|
|
766
|
-
async function buildAppFiles(files,
|
|
783
|
+
async function buildAppFiles(files, isDev2) {
|
|
767
784
|
const componentData = [];
|
|
768
785
|
const dataFiles = [];
|
|
769
786
|
const pageConfigFiles = files.filter((file) => {
|
|
@@ -778,12 +795,12 @@ async function buildAppFiles(files, isDev) {
|
|
|
778
795
|
platform: "node",
|
|
779
796
|
outdir: config.distDir,
|
|
780
797
|
bundle: true,
|
|
781
|
-
sourcemap:
|
|
798
|
+
sourcemap: isDev2 ? "inline" : false,
|
|
782
799
|
external: allPackages,
|
|
783
800
|
jsx: "transform",
|
|
784
|
-
minify: !
|
|
801
|
+
minify: !isDev2,
|
|
785
802
|
plugins: [
|
|
786
|
-
addDotJS(allPackages, extensions,
|
|
803
|
+
addDotJS(allPackages, extensions, isDev2),
|
|
787
804
|
transformTSXFiles(componentData, pageConfigFiles),
|
|
788
805
|
getDataFiles(dataFiles)
|
|
789
806
|
]
|
|
@@ -794,7 +811,7 @@ async function buildAppFiles(files, isDev) {
|
|
|
794
811
|
dataFiles
|
|
795
812
|
};
|
|
796
813
|
}
|
|
797
|
-
async function buildClientSideFiles(alpineDataFiles = [],
|
|
814
|
+
async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
|
|
798
815
|
const tempFilePath = path6.join(config.distTempFolder, "./app.ts");
|
|
799
816
|
fs7.ensureFileSync(tempFilePath);
|
|
800
817
|
const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
|
|
@@ -805,22 +822,22 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
|
|
|
805
822
|
}
|
|
806
823
|
);
|
|
807
824
|
convertEntryPointsToSingleFile(alpineDataFiles.concat(clientFiles), tempFilePath);
|
|
808
|
-
if (
|
|
825
|
+
if (isDev2) writeDevServerClientSideCode(tempFilePath);
|
|
809
826
|
writeSpaClientSideCode(tempFilePath);
|
|
810
827
|
await build({
|
|
811
828
|
entryPoints: [tempFilePath],
|
|
812
829
|
bundle: true,
|
|
813
830
|
outdir: config.distPublicScriptsDir,
|
|
814
|
-
minify: !
|
|
815
|
-
sourcemap:
|
|
831
|
+
minify: !isDev2,
|
|
832
|
+
sourcemap: isDev2 ? "inline" : false
|
|
816
833
|
});
|
|
817
834
|
const pagesFiles = globSync3(pagesScriptsGlob);
|
|
818
835
|
await build({
|
|
819
836
|
entryPoints: pagesFiles || [],
|
|
820
837
|
bundle: true,
|
|
821
838
|
outdir: config.distPublicScriptsDir + "/pages",
|
|
822
|
-
minify: !
|
|
823
|
-
sourcemap:
|
|
839
|
+
minify: !isDev2,
|
|
840
|
+
sourcemap: isDev2 ? "inline" : false
|
|
824
841
|
});
|
|
825
842
|
await logSize(config.distPublicDir, "client");
|
|
826
843
|
}
|
|
@@ -933,7 +950,13 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
933
950
|
let componentFileName = component.path.split("/").pop().replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
|
|
934
951
|
const isDynamicRoute = component.path.match(regex_default.isDynamicRoute);
|
|
935
952
|
if (isDynamicRoute) {
|
|
936
|
-
componentFileName = component.path.split("/").filter((dir) =>
|
|
953
|
+
componentFileName = component.path.split("/").filter((dir) => {
|
|
954
|
+
return dir.match(regex_default.isDynamicRoute) || dir.match(regex_default.catchAllRouteFilePath);
|
|
955
|
+
}).map((dir) => {
|
|
956
|
+
const matchesCatchAll = dir.match(regex_default.catchAllRouteFilePath);
|
|
957
|
+
if (matchesCatchAll) return dir.replace(regex_default.catchAllRouteFileName, "[0]");
|
|
958
|
+
return dir;
|
|
959
|
+
}).join("/").replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
|
|
937
960
|
}
|
|
938
961
|
const componentDynamicPaths = getComponentDynamicPaths(componentFileName);
|
|
939
962
|
const componentFn = componentImport.default;
|
|
@@ -953,7 +976,7 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
953
976
|
);
|
|
954
977
|
} catch (err) {
|
|
955
978
|
console.error(err);
|
|
956
|
-
console.
|
|
979
|
+
console.error("Could not build static component", component.path);
|
|
957
980
|
}
|
|
958
981
|
} else if (typeof config2?.staticPaths === "function") {
|
|
959
982
|
const dynamicPaths = await config2.staticPaths();
|
|
@@ -974,14 +997,14 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
974
997
|
doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
|
|
975
998
|
);
|
|
976
999
|
} catch (err) {
|
|
977
|
-
console.log("Could not build static component", component.path);
|
|
978
1000
|
console.error(err);
|
|
1001
|
+
console.error("Could not build static component", component.path);
|
|
979
1002
|
}
|
|
980
1003
|
}
|
|
981
1004
|
}
|
|
982
1005
|
}
|
|
983
1006
|
function getComponentDynamicPaths(componentPath) {
|
|
984
|
-
const matches = [...componentPath.matchAll(regex_default.dynamicRoutes)];
|
|
1007
|
+
const matches = [...componentPath.matchAll(regex_default.dynamicRoutes)].concat([...componentPath.matchAll(regex_default.catchAllRoute)]);
|
|
985
1008
|
if (!matches?.length) return null;
|
|
986
1009
|
const output = [];
|
|
987
1010
|
for (const match of matches) {
|
|
@@ -989,7 +1012,7 @@ function getComponentDynamicPaths(componentPath) {
|
|
|
989
1012
|
}
|
|
990
1013
|
return output;
|
|
991
1014
|
}
|
|
992
|
-
async function buildOnLoadFile(componentData,
|
|
1015
|
+
async function buildOnLoadFile(componentData, isDev2) {
|
|
993
1016
|
const onLoadFiles = [];
|
|
994
1017
|
const onLoadFileResult = {
|
|
995
1018
|
imports: "",
|
|
@@ -1027,12 +1050,12 @@ async function buildOnLoadFile(componentData, isDev) {
|
|
|
1027
1050
|
platform: "node",
|
|
1028
1051
|
outdir: config.distDir,
|
|
1029
1052
|
bundle: true,
|
|
1030
|
-
sourcemap:
|
|
1053
|
+
sourcemap: isDev2 ? "inline" : false,
|
|
1031
1054
|
external: allPackages,
|
|
1032
1055
|
jsx: "transform",
|
|
1033
|
-
minify: !
|
|
1056
|
+
minify: !isDev2,
|
|
1034
1057
|
plugins: [
|
|
1035
|
-
addDotJS(allPackages, extensions,
|
|
1058
|
+
addDotJS(allPackages, extensions, isDev2)
|
|
1036
1059
|
]
|
|
1037
1060
|
});
|
|
1038
1061
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"express.d.ts","sourceRoot":"","sources":["../../src/express.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAgB,OAAO,EAAqB,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"express.d.ts","sourceRoot":"","sources":["../../src/express.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAgB,OAAO,EAAqB,MAAM,SAAS,CAAC;AAuJ5E,wBAAsB,YAAY;;;GA8BjC;AAiBD,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,GAAG,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,iBAyB1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,MAAM,GAAG,KAAK,CAanG;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,UAQzE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/scripts/build.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,UAAU,EAA2B,aAAa,EAAE,MAAM,aAAa,CAAC;AAajF,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAA;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,YAAY,iBAsBhD;AAiJD,wBAAsB,yBAAyB,kBAgB9C;AAED,wBAAsB,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,EAAE,eAAe,WAAkB,iBAahH;AAED,wBAAsB,qBAAqB,CAAC,aAAa,EAAE,aAAa,EAAE,iBAezE;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/scripts/build.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,UAAU,EAA2B,aAAa,EAAE,MAAM,aAAa,CAAC;AAajF,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAA;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,YAAY,iBAsBhD;AAiJD,wBAAsB,yBAAyB,kBAgB9C;AAED,wBAAsB,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,EAAE,eAAe,WAAkB,iBAahH;AAED,wBAAsB,qBAAqB,CAAC,aAAa,EAAE,aAAa,EAAE,iBAezE;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,iBAyEpI;AAED,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,EAAE,CAQxE;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAA;AAGD,wBAAsB,eAAe,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,iBAoDpF"}
|
|
@@ -264,7 +264,7 @@ function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
|
|
|
264
264
|
value.imports = importText + "\n" + value.imports;
|
|
265
265
|
}
|
|
266
266
|
if ([ts.SyntaxKind.FirstStatement, ts.SyntaxKind.FunctionDeclaration].includes(child.kind)) {
|
|
267
|
-
|
|
267
|
+
const text = child.getText(source);
|
|
268
268
|
if (text.includes("xpineOnLoad")) {
|
|
269
269
|
const body = child?.body?.getText(source) || "";
|
|
270
270
|
value.fn = value.fn + "\n" + body ? `(function() ${body})();` : "";
|
|
@@ -307,7 +307,10 @@ var regex_default = {
|
|
|
307
307
|
endsWithTSX: /\.tsx$/,
|
|
308
308
|
endsWithJSX: /\.jsx$/,
|
|
309
309
|
endsWithFileName: /\.(html|tsx|jsx|js|ts)$/,
|
|
310
|
-
indexFile: /index\.(html|tsx|jsx|js|ts)$/g
|
|
310
|
+
indexFile: /index\.(html|tsx|jsx|js|ts)$/g,
|
|
311
|
+
catchAllRoute: /\/_all_$/g,
|
|
312
|
+
catchAllRouteFilePath: /_all_\.(html|tsx|jsx|js|ts)$/g,
|
|
313
|
+
catchAllRouteFileName: /_all_/g
|
|
311
314
|
};
|
|
312
315
|
|
|
313
316
|
// src/util/config-file.ts
|
|
@@ -378,7 +381,7 @@ function transformTSXFiles(componentData, pageConfigFiles) {
|
|
|
378
381
|
import fs3 from "fs-extra";
|
|
379
382
|
import path4 from "path";
|
|
380
383
|
import builtinModules from "builtin-modules";
|
|
381
|
-
function addDotJS(allPackages2, extensions2,
|
|
384
|
+
function addDotJS(allPackages2, extensions2, isDev3) {
|
|
382
385
|
const allPackagesIncludingNode = allPackages2.concat(builtinModules);
|
|
383
386
|
return {
|
|
384
387
|
name: "add-dot-js",
|
|
@@ -396,7 +399,7 @@ function addDotJS(allPackages2, extensions2, isDev2) {
|
|
|
396
399
|
}
|
|
397
400
|
let outputPath = args.path + (existsAsFile ? "" : "/index") + ".js";
|
|
398
401
|
outputPath = args.path.endsWith(".js") || args.path.endsWith(".mjs") ? args.path : outputPath;
|
|
399
|
-
return { path: outputPath + (
|
|
402
|
+
return { path: outputPath + (isDev3 ? `?cache=${Date.now()}` : ""), external: true };
|
|
400
403
|
}
|
|
401
404
|
});
|
|
402
405
|
}
|
|
@@ -443,6 +446,7 @@ var { verify, sign } = jsonwebtoken;
|
|
|
443
446
|
import requestIP from "request-ip";
|
|
444
447
|
import fs5 from "fs-extra";
|
|
445
448
|
import EventEmitter from "events";
|
|
449
|
+
var isDev = process.env.NODE_ENV === "development";
|
|
446
450
|
var OnInitEmitter = class extends EventEmitter {
|
|
447
451
|
};
|
|
448
452
|
var onInitEmitter = new OnInitEmitter();
|
|
@@ -503,19 +507,19 @@ var plugin2 = (opts = {}) => {
|
|
|
503
507
|
},
|
|
504
508
|
OnceExit(root) {
|
|
505
509
|
root.append([
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
510
|
+
":root {",
|
|
511
|
+
'--active-breakpoint: "default";',
|
|
512
|
+
"}"
|
|
509
513
|
].join(""));
|
|
510
514
|
const nodeValuesMapped = nodeValues.sort((a, b) => {
|
|
511
515
|
return Number(a.value.replace(/[^0-9]/g, "")) - Number(b.value.replace(/[^0-9]/g, ""));
|
|
512
516
|
}).map(({ breakpoint, value }) => {
|
|
513
517
|
return [
|
|
514
518
|
`@media (min-width: ${value}) {`,
|
|
515
|
-
|
|
519
|
+
":root {",
|
|
516
520
|
`--active-breakpoint: "${breakpoint}";`,
|
|
517
|
-
|
|
518
|
-
|
|
521
|
+
"}",
|
|
522
|
+
"}"
|
|
519
523
|
].join("");
|
|
520
524
|
});
|
|
521
525
|
for (const value of nodeValuesMapped) {
|
|
@@ -551,28 +555,28 @@ var packageJson = JSON.parse(fs7.readFileSync(config.packageJsonPath, "utf-8"));
|
|
|
551
555
|
var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
|
|
552
556
|
var xpineDistDir = getXPineDistDir();
|
|
553
557
|
async function buildApp(args) {
|
|
554
|
-
const
|
|
558
|
+
const isDev3 = args?.isDev || false;
|
|
555
559
|
const removePreviousBuild2 = args?.removePreviousBuild || false;
|
|
556
560
|
const disableTailwind2 = args?.disableTailwind || false;
|
|
557
561
|
try {
|
|
558
562
|
if (removePreviousBuild2) fs7.removeSync(config.distDir);
|
|
559
563
|
const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
|
|
560
|
-
const { componentData, dataFiles } = await buildAppFiles(srcDirFiles,
|
|
564
|
+
const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev3);
|
|
561
565
|
const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
|
|
562
|
-
await buildClientSideFiles([alpineDataFile],
|
|
566
|
+
await buildClientSideFiles([alpineDataFile], isDev3);
|
|
563
567
|
fs7.removeSync(config.distTempFolder);
|
|
564
568
|
await buildCSS(disableTailwind2);
|
|
565
569
|
await buildPublicFolderSymlinks();
|
|
566
|
-
await buildOnLoadFile(componentData,
|
|
567
|
-
if (!
|
|
568
|
-
if (!
|
|
569
|
-
if (!
|
|
570
|
+
await buildOnLoadFile(componentData, isDev3);
|
|
571
|
+
if (!isDev3) await triggerXPineOnLoad();
|
|
572
|
+
if (!isDev3) await buildFilesWithConfigs(componentData);
|
|
573
|
+
if (!isDev3) context.clear();
|
|
570
574
|
} catch (err) {
|
|
571
575
|
console.error("Build failed");
|
|
572
576
|
console.error(err);
|
|
573
577
|
}
|
|
574
578
|
}
|
|
575
|
-
async function buildAppFiles(files,
|
|
579
|
+
async function buildAppFiles(files, isDev3) {
|
|
576
580
|
const componentData = [];
|
|
577
581
|
const dataFiles = [];
|
|
578
582
|
const pageConfigFiles = files.filter((file) => {
|
|
@@ -587,12 +591,12 @@ async function buildAppFiles(files, isDev2) {
|
|
|
587
591
|
platform: "node",
|
|
588
592
|
outdir: config.distDir,
|
|
589
593
|
bundle: true,
|
|
590
|
-
sourcemap:
|
|
594
|
+
sourcemap: isDev3 ? "inline" : false,
|
|
591
595
|
external: allPackages,
|
|
592
596
|
jsx: "transform",
|
|
593
|
-
minify: !
|
|
597
|
+
minify: !isDev3,
|
|
594
598
|
plugins: [
|
|
595
|
-
addDotJS(allPackages, extensions,
|
|
599
|
+
addDotJS(allPackages, extensions, isDev3),
|
|
596
600
|
transformTSXFiles(componentData, pageConfigFiles),
|
|
597
601
|
getDataFiles(dataFiles)
|
|
598
602
|
]
|
|
@@ -603,7 +607,7 @@ async function buildAppFiles(files, isDev2) {
|
|
|
603
607
|
dataFiles
|
|
604
608
|
};
|
|
605
609
|
}
|
|
606
|
-
async function buildClientSideFiles(alpineDataFiles = [],
|
|
610
|
+
async function buildClientSideFiles(alpineDataFiles = [], isDev3) {
|
|
607
611
|
const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
|
|
608
612
|
fs7.ensureFileSync(tempFilePath);
|
|
609
613
|
const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
|
|
@@ -614,22 +618,22 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
|
|
|
614
618
|
}
|
|
615
619
|
);
|
|
616
620
|
convertEntryPointsToSingleFile(alpineDataFiles.concat(clientFiles), tempFilePath);
|
|
617
|
-
if (
|
|
621
|
+
if (isDev3) writeDevServerClientSideCode(tempFilePath);
|
|
618
622
|
writeSpaClientSideCode(tempFilePath);
|
|
619
623
|
await build({
|
|
620
624
|
entryPoints: [tempFilePath],
|
|
621
625
|
bundle: true,
|
|
622
626
|
outdir: config.distPublicScriptsDir,
|
|
623
|
-
minify: !
|
|
624
|
-
sourcemap:
|
|
627
|
+
minify: !isDev3,
|
|
628
|
+
sourcemap: isDev3 ? "inline" : false
|
|
625
629
|
});
|
|
626
630
|
const pagesFiles = globSync3(pagesScriptsGlob);
|
|
627
631
|
await build({
|
|
628
632
|
entryPoints: pagesFiles || [],
|
|
629
633
|
bundle: true,
|
|
630
634
|
outdir: config.distPublicScriptsDir + "/pages",
|
|
631
|
-
minify: !
|
|
632
|
-
sourcemap:
|
|
635
|
+
minify: !isDev3,
|
|
636
|
+
sourcemap: isDev3 ? "inline" : false
|
|
633
637
|
});
|
|
634
638
|
await logSize(config.distPublicDir, "client");
|
|
635
639
|
}
|
|
@@ -742,7 +746,13 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
742
746
|
let componentFileName = component.path.split("/").pop().replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
|
|
743
747
|
const isDynamicRoute = component.path.match(regex_default.isDynamicRoute);
|
|
744
748
|
if (isDynamicRoute) {
|
|
745
|
-
componentFileName = component.path.split("/").filter((dir) =>
|
|
749
|
+
componentFileName = component.path.split("/").filter((dir) => {
|
|
750
|
+
return dir.match(regex_default.isDynamicRoute) || dir.match(regex_default.catchAllRouteFilePath);
|
|
751
|
+
}).map((dir) => {
|
|
752
|
+
const matchesCatchAll = dir.match(regex_default.catchAllRouteFilePath);
|
|
753
|
+
if (matchesCatchAll) return dir.replace(regex_default.catchAllRouteFileName, "[0]");
|
|
754
|
+
return dir;
|
|
755
|
+
}).join("/").replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
|
|
746
756
|
}
|
|
747
757
|
const componentDynamicPaths = getComponentDynamicPaths(componentFileName);
|
|
748
758
|
const componentFn = componentImport.default;
|
|
@@ -762,7 +772,7 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
762
772
|
);
|
|
763
773
|
} catch (err) {
|
|
764
774
|
console.error(err);
|
|
765
|
-
console.
|
|
775
|
+
console.error("Could not build static component", component.path);
|
|
766
776
|
}
|
|
767
777
|
} else if (typeof config2?.staticPaths === "function") {
|
|
768
778
|
const dynamicPaths = await config2.staticPaths();
|
|
@@ -783,14 +793,14 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
783
793
|
doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
|
|
784
794
|
);
|
|
785
795
|
} catch (err) {
|
|
786
|
-
console.log("Could not build static component", component.path);
|
|
787
796
|
console.error(err);
|
|
797
|
+
console.error("Could not build static component", component.path);
|
|
788
798
|
}
|
|
789
799
|
}
|
|
790
800
|
}
|
|
791
801
|
}
|
|
792
802
|
function getComponentDynamicPaths(componentPath) {
|
|
793
|
-
const matches = [...componentPath.matchAll(regex_default.dynamicRoutes)];
|
|
803
|
+
const matches = [...componentPath.matchAll(regex_default.dynamicRoutes)].concat([...componentPath.matchAll(regex_default.catchAllRoute)]);
|
|
794
804
|
if (!matches?.length) return null;
|
|
795
805
|
const output = [];
|
|
796
806
|
for (const match of matches) {
|
|
@@ -798,7 +808,7 @@ function getComponentDynamicPaths(componentPath) {
|
|
|
798
808
|
}
|
|
799
809
|
return output;
|
|
800
810
|
}
|
|
801
|
-
async function buildOnLoadFile(componentData,
|
|
811
|
+
async function buildOnLoadFile(componentData, isDev3) {
|
|
802
812
|
const onLoadFiles = [];
|
|
803
813
|
const onLoadFileResult = {
|
|
804
814
|
imports: "",
|
|
@@ -836,12 +846,12 @@ async function buildOnLoadFile(componentData, isDev2) {
|
|
|
836
846
|
platform: "node",
|
|
837
847
|
outdir: config.distDir,
|
|
838
848
|
bundle: true,
|
|
839
|
-
sourcemap:
|
|
849
|
+
sourcemap: isDev3 ? "inline" : false,
|
|
840
850
|
external: allPackages,
|
|
841
851
|
jsx: "transform",
|
|
842
|
-
minify: !
|
|
852
|
+
minify: !isDev3,
|
|
843
853
|
plugins: [
|
|
844
|
-
addDotJS(allPackages, extensions,
|
|
854
|
+
addDotJS(allPackages, extensions, isDev3)
|
|
845
855
|
]
|
|
846
856
|
});
|
|
847
857
|
}
|
|
@@ -850,5 +860,5 @@ async function buildOnLoadFile(componentData, isDev2) {
|
|
|
850
860
|
import yargs from "yargs";
|
|
851
861
|
import { hideBin } from "yargs/helpers";
|
|
852
862
|
var argv = yargs(hideBin(process.argv)).argv;
|
|
853
|
-
var { isDev, removePreviousBuild, disableTailwind } = argv;
|
|
854
|
-
buildApp({ isDev, removePreviousBuild, disableTailwind });
|
|
863
|
+
var { isDev: isDev2, removePreviousBuild, disableTailwind } = argv;
|
|
864
|
+
buildApp({ isDev: isDev2, removePreviousBuild, disableTailwind });
|
|
@@ -271,7 +271,7 @@ function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
|
|
|
271
271
|
value.imports = importText + "\n" + value.imports;
|
|
272
272
|
}
|
|
273
273
|
if ([ts.SyntaxKind.FirstStatement, ts.SyntaxKind.FunctionDeclaration].includes(child.kind)) {
|
|
274
|
-
|
|
274
|
+
const text = child.getText(source);
|
|
275
275
|
if (text.includes("xpineOnLoad")) {
|
|
276
276
|
const body = child?.body?.getText(source) || "";
|
|
277
277
|
value.fn = value.fn + "\n" + body ? `(function() ${body})();` : "";
|
|
@@ -314,7 +314,10 @@ var regex_default = {
|
|
|
314
314
|
endsWithTSX: /\.tsx$/,
|
|
315
315
|
endsWithJSX: /\.jsx$/,
|
|
316
316
|
endsWithFileName: /\.(html|tsx|jsx|js|ts)$/,
|
|
317
|
-
indexFile: /index\.(html|tsx|jsx|js|ts)$/g
|
|
317
|
+
indexFile: /index\.(html|tsx|jsx|js|ts)$/g,
|
|
318
|
+
catchAllRoute: /\/_all_$/g,
|
|
319
|
+
catchAllRouteFilePath: /_all_\.(html|tsx|jsx|js|ts)$/g,
|
|
320
|
+
catchAllRouteFileName: /_all_/g
|
|
318
321
|
};
|
|
319
322
|
|
|
320
323
|
// src/util/config-file.ts
|
|
@@ -385,7 +388,7 @@ function transformTSXFiles(componentData, pageConfigFiles) {
|
|
|
385
388
|
import fs3 from "fs-extra";
|
|
386
389
|
import path4 from "path";
|
|
387
390
|
import builtinModules from "builtin-modules";
|
|
388
|
-
function addDotJS(allPackages2, extensions2,
|
|
391
|
+
function addDotJS(allPackages2, extensions2, isDev2) {
|
|
389
392
|
const allPackagesIncludingNode = allPackages2.concat(builtinModules);
|
|
390
393
|
return {
|
|
391
394
|
name: "add-dot-js",
|
|
@@ -403,7 +406,7 @@ function addDotJS(allPackages2, extensions2, isDev) {
|
|
|
403
406
|
}
|
|
404
407
|
let outputPath = args.path + (existsAsFile ? "" : "/index") + ".js";
|
|
405
408
|
outputPath = args.path.endsWith(".js") || args.path.endsWith(".mjs") ? args.path : outputPath;
|
|
406
|
-
return { path: outputPath + (
|
|
409
|
+
return { path: outputPath + (isDev2 ? `?cache=${Date.now()}` : ""), external: true };
|
|
407
410
|
}
|
|
408
411
|
});
|
|
409
412
|
}
|
|
@@ -450,6 +453,7 @@ var { verify, sign } = jsonwebtoken;
|
|
|
450
453
|
import requestIP from "request-ip";
|
|
451
454
|
import fs5 from "fs-extra";
|
|
452
455
|
import EventEmitter from "events";
|
|
456
|
+
var isDev = process.env.NODE_ENV === "development";
|
|
453
457
|
var OnInitEmitter = class extends EventEmitter {
|
|
454
458
|
};
|
|
455
459
|
var onInitEmitter = new OnInitEmitter();
|
|
@@ -510,19 +514,19 @@ var plugin2 = (opts = {}) => {
|
|
|
510
514
|
},
|
|
511
515
|
OnceExit(root) {
|
|
512
516
|
root.append([
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
517
|
+
":root {",
|
|
518
|
+
'--active-breakpoint: "default";',
|
|
519
|
+
"}"
|
|
516
520
|
].join(""));
|
|
517
521
|
const nodeValuesMapped = nodeValues.sort((a, b) => {
|
|
518
522
|
return Number(a.value.replace(/[^0-9]/g, "")) - Number(b.value.replace(/[^0-9]/g, ""));
|
|
519
523
|
}).map(({ breakpoint, value }) => {
|
|
520
524
|
return [
|
|
521
525
|
`@media (min-width: ${value}) {`,
|
|
522
|
-
|
|
526
|
+
":root {",
|
|
523
527
|
`--active-breakpoint: "${breakpoint}";`,
|
|
524
|
-
|
|
525
|
-
|
|
528
|
+
"}",
|
|
529
|
+
"}"
|
|
526
530
|
].join("");
|
|
527
531
|
});
|
|
528
532
|
for (const value of nodeValuesMapped) {
|
|
@@ -558,28 +562,28 @@ var packageJson = JSON.parse(fs7.readFileSync(config.packageJsonPath, "utf-8"));
|
|
|
558
562
|
var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
|
|
559
563
|
var xpineDistDir = getXPineDistDir();
|
|
560
564
|
async function buildApp(args) {
|
|
561
|
-
const
|
|
565
|
+
const isDev2 = args?.isDev || false;
|
|
562
566
|
const removePreviousBuild = args?.removePreviousBuild || false;
|
|
563
567
|
const disableTailwind = args?.disableTailwind || false;
|
|
564
568
|
try {
|
|
565
569
|
if (removePreviousBuild) fs7.removeSync(config.distDir);
|
|
566
570
|
const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
|
|
567
|
-
const { componentData, dataFiles } = await buildAppFiles(srcDirFiles,
|
|
571
|
+
const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev2);
|
|
568
572
|
const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
|
|
569
|
-
await buildClientSideFiles([alpineDataFile],
|
|
573
|
+
await buildClientSideFiles([alpineDataFile], isDev2);
|
|
570
574
|
fs7.removeSync(config.distTempFolder);
|
|
571
575
|
await buildCSS(disableTailwind);
|
|
572
576
|
await buildPublicFolderSymlinks();
|
|
573
|
-
await buildOnLoadFile(componentData,
|
|
574
|
-
if (!
|
|
575
|
-
if (!
|
|
576
|
-
if (!
|
|
577
|
+
await buildOnLoadFile(componentData, isDev2);
|
|
578
|
+
if (!isDev2) await triggerXPineOnLoad();
|
|
579
|
+
if (!isDev2) await buildFilesWithConfigs(componentData);
|
|
580
|
+
if (!isDev2) context.clear();
|
|
577
581
|
} catch (err) {
|
|
578
582
|
console.error("Build failed");
|
|
579
583
|
console.error(err);
|
|
580
584
|
}
|
|
581
585
|
}
|
|
582
|
-
async function buildAppFiles(files,
|
|
586
|
+
async function buildAppFiles(files, isDev2) {
|
|
583
587
|
const componentData = [];
|
|
584
588
|
const dataFiles = [];
|
|
585
589
|
const pageConfigFiles = files.filter((file) => {
|
|
@@ -594,12 +598,12 @@ async function buildAppFiles(files, isDev) {
|
|
|
594
598
|
platform: "node",
|
|
595
599
|
outdir: config.distDir,
|
|
596
600
|
bundle: true,
|
|
597
|
-
sourcemap:
|
|
601
|
+
sourcemap: isDev2 ? "inline" : false,
|
|
598
602
|
external: allPackages,
|
|
599
603
|
jsx: "transform",
|
|
600
|
-
minify: !
|
|
604
|
+
minify: !isDev2,
|
|
601
605
|
plugins: [
|
|
602
|
-
addDotJS(allPackages, extensions,
|
|
606
|
+
addDotJS(allPackages, extensions, isDev2),
|
|
603
607
|
transformTSXFiles(componentData, pageConfigFiles),
|
|
604
608
|
getDataFiles(dataFiles)
|
|
605
609
|
]
|
|
@@ -610,7 +614,7 @@ async function buildAppFiles(files, isDev) {
|
|
|
610
614
|
dataFiles
|
|
611
615
|
};
|
|
612
616
|
}
|
|
613
|
-
async function buildClientSideFiles(alpineDataFiles = [],
|
|
617
|
+
async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
|
|
614
618
|
const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
|
|
615
619
|
fs7.ensureFileSync(tempFilePath);
|
|
616
620
|
const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
|
|
@@ -621,22 +625,22 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
|
|
|
621
625
|
}
|
|
622
626
|
);
|
|
623
627
|
convertEntryPointsToSingleFile(alpineDataFiles.concat(clientFiles), tempFilePath);
|
|
624
|
-
if (
|
|
628
|
+
if (isDev2) writeDevServerClientSideCode(tempFilePath);
|
|
625
629
|
writeSpaClientSideCode(tempFilePath);
|
|
626
630
|
await build({
|
|
627
631
|
entryPoints: [tempFilePath],
|
|
628
632
|
bundle: true,
|
|
629
633
|
outdir: config.distPublicScriptsDir,
|
|
630
|
-
minify: !
|
|
631
|
-
sourcemap:
|
|
634
|
+
minify: !isDev2,
|
|
635
|
+
sourcemap: isDev2 ? "inline" : false
|
|
632
636
|
});
|
|
633
637
|
const pagesFiles = globSync3(pagesScriptsGlob);
|
|
634
638
|
await build({
|
|
635
639
|
entryPoints: pagesFiles || [],
|
|
636
640
|
bundle: true,
|
|
637
641
|
outdir: config.distPublicScriptsDir + "/pages",
|
|
638
|
-
minify: !
|
|
639
|
-
sourcemap:
|
|
642
|
+
minify: !isDev2,
|
|
643
|
+
sourcemap: isDev2 ? "inline" : false
|
|
640
644
|
});
|
|
641
645
|
await logSize(config.distPublicDir, "client");
|
|
642
646
|
}
|
|
@@ -749,7 +753,13 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
749
753
|
let componentFileName = component.path.split("/").pop().replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
|
|
750
754
|
const isDynamicRoute = component.path.match(regex_default.isDynamicRoute);
|
|
751
755
|
if (isDynamicRoute) {
|
|
752
|
-
componentFileName = component.path.split("/").filter((dir) =>
|
|
756
|
+
componentFileName = component.path.split("/").filter((dir) => {
|
|
757
|
+
return dir.match(regex_default.isDynamicRoute) || dir.match(regex_default.catchAllRouteFilePath);
|
|
758
|
+
}).map((dir) => {
|
|
759
|
+
const matchesCatchAll = dir.match(regex_default.catchAllRouteFilePath);
|
|
760
|
+
if (matchesCatchAll) return dir.replace(regex_default.catchAllRouteFileName, "[0]");
|
|
761
|
+
return dir;
|
|
762
|
+
}).join("/").replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
|
|
753
763
|
}
|
|
754
764
|
const componentDynamicPaths = getComponentDynamicPaths(componentFileName);
|
|
755
765
|
const componentFn = componentImport.default;
|
|
@@ -769,7 +779,7 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
769
779
|
);
|
|
770
780
|
} catch (err) {
|
|
771
781
|
console.error(err);
|
|
772
|
-
console.
|
|
782
|
+
console.error("Could not build static component", component.path);
|
|
773
783
|
}
|
|
774
784
|
} else if (typeof config2?.staticPaths === "function") {
|
|
775
785
|
const dynamicPaths = await config2.staticPaths();
|
|
@@ -790,14 +800,14 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
|
|
|
790
800
|
doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
|
|
791
801
|
);
|
|
792
802
|
} catch (err) {
|
|
793
|
-
console.log("Could not build static component", component.path);
|
|
794
803
|
console.error(err);
|
|
804
|
+
console.error("Could not build static component", component.path);
|
|
795
805
|
}
|
|
796
806
|
}
|
|
797
807
|
}
|
|
798
808
|
}
|
|
799
809
|
function getComponentDynamicPaths(componentPath) {
|
|
800
|
-
const matches = [...componentPath.matchAll(regex_default.dynamicRoutes)];
|
|
810
|
+
const matches = [...componentPath.matchAll(regex_default.dynamicRoutes)].concat([...componentPath.matchAll(regex_default.catchAllRoute)]);
|
|
801
811
|
if (!matches?.length) return null;
|
|
802
812
|
const output = [];
|
|
803
813
|
for (const match of matches) {
|
|
@@ -805,7 +815,7 @@ function getComponentDynamicPaths(componentPath) {
|
|
|
805
815
|
}
|
|
806
816
|
return output;
|
|
807
817
|
}
|
|
808
|
-
async function buildOnLoadFile(componentData,
|
|
818
|
+
async function buildOnLoadFile(componentData, isDev2) {
|
|
809
819
|
const onLoadFiles = [];
|
|
810
820
|
const onLoadFileResult = {
|
|
811
821
|
imports: "",
|
|
@@ -843,12 +853,12 @@ async function buildOnLoadFile(componentData, isDev) {
|
|
|
843
853
|
platform: "node",
|
|
844
854
|
outdir: config.distDir,
|
|
845
855
|
bundle: true,
|
|
846
|
-
sourcemap:
|
|
856
|
+
sourcemap: isDev2 ? "inline" : false,
|
|
847
857
|
external: allPackages,
|
|
848
858
|
jsx: "transform",
|
|
849
|
-
minify: !
|
|
859
|
+
minify: !isDev2,
|
|
850
860
|
plugins: [
|
|
851
|
-
addDotJS(allPackages, extensions,
|
|
861
|
+
addDotJS(allPackages, extensions, isDev2)
|
|
852
862
|
]
|
|
853
863
|
});
|
|
854
864
|
}
|
package/dist/src/static/spa.js
CHANGED
|
@@ -214,11 +214,14 @@ function safeParseURL(url) {
|
|
|
214
214
|
return {};
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
|
+
function getCurrentBreakpoint() {
|
|
218
|
+
return window.getComputedStyle(document.documentElement).getPropertyValue("--active-breakpoint")?.replace(/[\'\"]/g, "")?.trim() || "";
|
|
219
|
+
}
|
|
217
220
|
function handleBreakpointEvents() {
|
|
218
221
|
let lastSentBreakpoint = "";
|
|
219
222
|
let initial = true;
|
|
220
223
|
return function() {
|
|
221
|
-
const breakpoint =
|
|
224
|
+
const breakpoint = getCurrentBreakpoint();
|
|
222
225
|
if (breakpoint !== lastSentBreakpoint) {
|
|
223
226
|
const event = new CustomEvent("breakpoint-change", {
|
|
224
227
|
detail: {
|
package/dist/src/util/regex.d.ts
CHANGED
|
@@ -8,6 +8,9 @@ declare const _default: {
|
|
|
8
8
|
endsWithJSX: RegExp;
|
|
9
9
|
endsWithFileName: RegExp;
|
|
10
10
|
indexFile: RegExp;
|
|
11
|
+
catchAllRoute: RegExp;
|
|
12
|
+
catchAllRouteFilePath: RegExp;
|
|
13
|
+
catchAllRouteFileName: RegExp;
|
|
11
14
|
};
|
|
12
15
|
export default _default;
|
|
13
16
|
//# sourceMappingURL=regex.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"regex.d.ts","sourceRoot":"","sources":["../../../src/util/regex.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"regex.d.ts","sourceRoot":"","sources":["../../../src/util/regex.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,wBAaE"}
|