eddev 0.2.0-beta.23 → 0.2.0-beta.24

package/build/get-webpack-config.js

@@ -74,13 +74,14 @@ var mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin
 var autoprefixer_1 = __importDefault(require("autoprefixer"));
 // Custom Babel plugins
 var plugin_name_defined_components_1 = __importDefault(require("./babel/plugin-name-defined-components"));
+var fs_1 = require("fs");
 var manifest_blocks_1 = require("./manifests/manifest-blocks");
 var manifest_fields_1 = require("./manifests/manifest-fields");
 var manifest_views_1 = require("./manifests/manifest-views");
 var get_config_1 = require("../config/get-config");
 function getWebpackConfig(opts) {
     return __awaiter(this, void 0, void 0, function () {
-        var compiling, config, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, manifestLoaders, buildID;
+        var compiling, config, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, manifestLoaders, rpcExists, buildID;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -333,6 +334,9 @@ function getWebpackConfig(opts) {
                     }
                     DEFINES["process.devUI"] = config.devUI === "enabled";
                     DEFINES["process.serverlessEndpoint"] = "window.SERVERLESS_ENDPOINT";
+                    rpcExists = (0, fs_1.existsSync)(path_1.default.join(opts.baseDirectory, "api/_rpc.ts")) ||
+                        (0, fs_1.existsSync)(path_1.default.join(opts.baseDirectory, "api/_rpc/index.ts"));
+                    DEFINES["process.rpcEnabled"] = rpcExists ? "true" : "false";
                     if (isBrowser) {
                         DEFINES["process.env.themePath"] = "window.THEME_PATH || ".concat(DEFINES["process.env.themePath"]);
                     }

package/build/serverless/create-next-app.js

@@ -129,6 +129,7 @@ function createNextApp(opts) {
                             "types.graphql.ts",
                             "types.views.ts",
                             "types.blocks.ts",
+                            "types.api.ts",
                             "utils/**/*",
                             "ed.config.json",
                         ])
@@ -167,13 +168,23 @@ function createNextApp(opts) {
                     _b.label = 14;
                 case 14: 
                 // Sync favicon
-                return [4 /*yield*/, copyFiles((0, path_1.join)(opts.baseDirectory), (0, path_1.join)(serverlessDirectory, "public/"), ["favicon.ico"])];
+                return [4 /*yield*/, copyFiles((0, path_1.join)(opts.baseDirectory), (0, path_1.join)(serverlessDirectory, "public/"), ["favicon.ico"])
+                    // Write APIs proxy code
+                ];
                 case 15:
                     // Sync favicon
                     _b.sent();
-                    return [4 /*yield*/, writeAPIProxies((0, path_1.join)(opts.baseDirectory, "api"), (0, path_1.join)(serverlessDirectory, "pages/api"))];
+                    // Write APIs proxy code
+                    return [4 /*yield*/, writeAPIProxies((0, path_1.join)(opts.baseDirectory, "api"), (0, path_1.join)(serverlessDirectory, "pages/api"))
+                        // Remove pages/api/trpc directory if no _rpc is found
+                    ];
                 case 16:
+                    // Write APIs proxy code
                     _b.sent();
+                    // Remove pages/api/trpc directory if no _rpc is found
+                    if (!(0, fs_1.existsSync)((0, path_1.join)(opts.baseDirectory, "api/_rpc")) || !(0, fs_1.existsSync)((0, path_1.join)(opts.baseDirectory, "api/_rpc.ts"))) {
+                        (0, fs_extra_1.removeSync)((0, path_1.join)(serverlessDirectory, "pages/api/trpc"));
+                    }
                     _b.label = 17;
                 case 17:
                     if (!!isVercel) return [3 /*break*/, 19];
@@ -309,7 +320,8 @@ function writeAPIProxies(sourceFolder, targetFolder) {
                     return [4 /*yield*/, Promise.all(files.map(function (file) {
                             var name = file.replace(sourceFolder, "");
                             var outputPath = (0, path_1.join)(targetFolder, name);
-                            var relativePath = (0, path_1.relative)(outputPath, file);
+                            if (name.includes("_rpc"))
+                                return;
                             return (0, promises_1.writeFile)(outputPath, "import handler from \"".concat(file, "\"; export default handler;"));
                         }))];
                 case 2:
@@ -322,7 +334,9 @@ function writeAPIProxies(sourceFolder, targetFolder) {
 function syncAPIProxies(sourceFolder, targetFolder) {
     return __awaiter(this, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            return [2 /*return*/, syncFiles(sourceFolder, targetFolder, ["**/*.{tsx,ts,js}"], function (inputPath, outputPath) {
+            return [2 /*return*/, syncFiles(sourceFolder, targetFolder, ["**/*.{tsx,ts,js}"], function (inputPath) {
+                    if (inputPath.includes("_rpc"))
+                        return null;
                     return "import handler from \"".concat(inputPath.replace(/\.(ts|js)x?$/, ""), "\"; export default handler;");
                 })];
         });
@@ -336,12 +350,9 @@ function copyFiles(sourceFolder, targetFolder, patterns) {
                 case 0: return [4 /*yield*/, Promise.all(patterns.map(function (pattern) { return (0, glob_promise_1.default)((0, path_1.resolve)(sourceFolder, pattern)); }))];
                 case 1:
                     files = (_a.sent()).flat();
-                    console.log("Files are", files);
                     // Replace sourceFolder in each path, and copy to target folder
                     return [4 /*yield*/, Promise.all(files.map(function (file) {
-                            console.log("Copying", file, file.replace(sourceFolder, targetFolder));
                             var stat = (0, fs_1.statSync)(file);
-                            console.log("File exists", file);
                             if (!stat.isDirectory()) {
                                 return (0, fs_extra_1.copy)(file, file.replace(sourceFolder, targetFolder));
                             }
@@ -371,7 +382,10 @@ function syncFiles(sourceFolder, targetFolder, patterns, proxy) {
                                 })
                                     .on("add", function (path) {
                                     if (proxy) {
-                                        (0, promises_1.writeFile)((0, path_1.join)(targetFolder, path), proxy((0, path_1.relative)(targetFolder, (0, path_1.join)(sourceFolder, path)), (0, path_1.join)(targetFolder, path)));
+                                        var output = proxy((0, path_1.relative)(targetFolder, (0, path_1.join)(sourceFolder, path)), (0, path_1.join)(targetFolder, path));
+                                        if (typeof output === "string") {
+                                            (0, promises_1.writeFile)((0, path_1.join)(targetFolder, path), output);
+                                        }
                                     }
                                     else {
                                         (0, fs_extra_1.copy)((0, path_1.join)(sourceFolder, path), (0, path_1.join)(targetFolder, path));

package/build/workers/codegen-worker-script.js

@@ -162,6 +162,8 @@ function beginWork(opts) {
                     }
                 });
             }); };
+            // Create RPC/API types
+            (0, promises_1.writeFile)(Path.join(opts.baseDirectory, "types.api.ts"), "\n    import type { router, createContext } from \"./api/_rpc\"\n    import { createReactQueryHooks } from \"@trpc/react\"\n    export {}\n    \n    const createQueryHooks = () => createReactQueryHooks<typeof router>()\n    \n    declare global {\n      type RPCUse = ReturnType<typeof createQueryHooks>\n      type RPCRouter = typeof router\n      type RPCContextType = Awaited<ReturnType<typeof createContext>>\n      type RPCClient = ReturnType<RPCUse[\"createClient\"]>\n      type RPCUseQuery = RPCUse[\"useQuery\"]\n      type RPCUseMutation = RPCUse[\"useMutation\"]\n      type RPCUseInfiniteQuery = RPCUse[\"useInfiniteQuery\"]\n    }    \n  ");
             regenerate = debounce(100, function () { return __awaiter(_this, void 0, void 0, function () {
                 var startTime, hasChanged, err_1, documentSets, parseErrors, _loop_1, _a, _b, _i, key, generates, errors, _c, _d, _e, file, base, config, output, err_2;
                 var _this = this;

package/dev-ui/theme.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const styled: <Type extends import("react").ComponentType<any> | keyof JSX.IntrinsicElements | import("@stitches/react/types/util").Function, Composers extends (string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function | {
     [name: string]: unknown;
 })[], CSS = import("@stitches/react/types/css-util").CSS<{}, {

package/dynamic/dynamic-component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const dynamic: {
     <Props, Module = import("@loadable/component").DefaultComponent<Props>>(loadFn: (props: Props) => Promise<Module>, options: import("@loadable/component").OptionsWithResolver<Props, Module>): import("@loadable/component").LoadableComponent<Props>;
     <Props_1>(loadFn: (props: Props_1) => Promise<import("@loadable/component").DefaultComponent<Props_1>>, options?: import("@loadable/component").OptionsWithoutResolver<Props_1> | undefined): import("@loadable/component").LoadableComponent<Props_1>;

package/entry/Root.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export default function Root(): JSX.Element;
+declare function Root(): JSX.Element;
+declare const _default: typeof Root | import("next").NextComponentType<import("next").NextPageContext, {}, {}>;
+export default _default;

package/entry/Root.js

@@ -36,6 +36,7 @@ var views_1 = __importStar(require("@manifest/views"));
 var react_1 = require("react");
 var routing_1 = require("../routing");
 var loader_1 = require("../dev-ui/loader");
+var next_1 = require("@trpc/next");
 function Root() {
     var route = (0, routing_1.useRoute)();
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [process.devUI && (0, jsx_runtime_1.jsx)(loader_1.DevUILoader, {}, void 0), (0, jsx_runtime_1.jsx)(views_1.App, { children: (0, jsx_runtime_1.jsx)(routing_1.Switch, { children: Object.entries(views_1.default).map(function (_a) {
@@ -44,4 +45,14 @@ function Root() {
                         return ((0, jsx_runtime_1.jsx)(routing_1.Route, __assign({ match: function (route) { var _a; return ((_a = route.data) === null || _a === void 0 ? void 0 : _a.view) === name; } }, { children: (0, jsx_runtime_1.jsx)(Component, __assign({}, (_c = (_b = route.data) === null || _b === void 0 ? void 0 : _b.viewData) === null || _c === void 0 ? void 0 : _c.data), void 0) }), name));
                     }) }, void 0) }, void 0)] }, void 0));
 }
-exports.default = Root;
+exports.default = process.rpcEnabled
+    ? (0, next_1.withTRPC)({
+        config: function (_a) {
+            var ctx = _a.ctx;
+            return {
+                url: process.serverlessEndpoint + "api/trpc",
+            };
+        },
+        ssr: false,
+    })(Root)
+    : Root;

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./usePageLoad";
 export * from "./useAppData";
+export * from "./useRPC";

package/hooks/index.js

@@ -12,3 +12,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./usePageLoad"), exports);
 __exportStar(require("./useAppData"), exports);
+__exportStar(require("./useRPC"), exports);

package/hooks/rpc-client.d.ts

@@ -0,0 +1,3 @@
+export declare const useRPCQuery: <TPath extends string>(pathAndInput: [TPath, (null | undefined)?], opts?: import("@trpc/react").UseTRPCQueryOptions<TPath, RPCRouter, RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>> | undefined) => import("react-query").UseQueryResult<RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>>;
+export declare const useRPCMutation: <TPath_1 extends string>(path: TPath_1 | [TPath_1], opts?: import("@trpc/react").UseTRPCMutationOptions<RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>, RPCRouter> | undefined) => import("react-query").UseMutationResult<RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>, RPCRouter, unknown>;
+export declare const rpcClient: import("@trpc/react").TRPCClient<RPCRouter>;

package/hooks/rpc-client.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rpcClient = exports.useRPCMutation = exports.useRPCQuery = void 0;
+var react_1 = require("@trpc/react");
+// @ts-ignore
+var _a = (0, react_1.createReactQueryHooks)({
+    // @ts-ignore
+    url: process.serverlessEndpoint + "/api/trpc",
+}), useQuery = _a.useQuery, useMutation = _a.useMutation, createClient = _a.createClient;
+exports.useRPCQuery = useQuery;
+exports.useRPCMutation = useMutation;
+exports.rpcClient = createClient({
+    // @ts-ignore
+    url: process.serverlessEndpoint + "/api/trpc",
+});

package/hooks/useRPC.d.ts

@@ -0,0 +1,4 @@
+export declare const useRPCQuery: RPCUseQuery;
+export declare const useRPCMutation: RPCUseMutation;
+export declare const useRPCMutation: RPCUseInfiniteQuery;
+export declare const rpcClient: RPCClient;

package/hooks/useRPC.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rpcClient = exports.useRPCMutation = exports.useRPCQuery = void 0;
+var react_1 = require("@trpc/react");
+var trpc = (0, react_1.createReactQueryHooks)();
+// @ts-ignore
+exports.useRPCQuery = trpc.useQuery;
+// @ts-ignore
+exports.useRPCMutation = trpc.useQuery;
+// @ts-ignore
+exports.useRPCMutation = trpc.useInfiniteQuery;
+exports.rpcClient = trpc.createClient({
+    // @ts-ignore
+    url: process.serverlessEndpoint + "/api/trpc",
+    // @ts-ignore
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.2.0-beta.23",
+  "version": "0.2.0-beta.24",
   "main": "./index.js",
   "license": "MIT",
   "bin": {

package/serverless/create-rpc-client.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function createRPCClient(): {
     Provider: ({ client, queryClient, children, isPrepass, ssrContext, }: {
         queryClient: import("react-query").QueryClient;

package/serverless/define-rpc-router.d.ts

@@ -1,2 +1,4 @@
 import * as trpc from "@trpc/server";
-export declare function defineRPC<TContext>(): import("@trpc/server/dist/declarations/src/router").Router<TContext, TContext, {}, {}, {}, trpc.DefaultErrorShape>;
+import * as trpcNext from "@trpc/server/adapters/next";
+export declare function defineRPC<TCreator extends (base: ReturnType<typeof trpc.router>, z: typeof import("zod")) => any>(creator: TCreator): ReturnType<TCreator>;
+export declare function defineRPCContextCreator<TCreator extends (opts: trpcNext.CreateNextContextOptions) => any>(creator: TCreator): TCreator;

package/serverless/define-rpc-router.js

@@ -19,9 +19,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineRPC = void 0;
+exports.defineRPCContextCreator = exports.defineRPC = void 0;
 var trpc = __importStar(require("@trpc/server"));
-function defineRPC() {
-    return trpc.router();
+var z = __importStar(require("zod"));
+// @ts-ignore
+function defineRPC(creator) {
+    return creator(trpc.router(), z);
 }
 exports.defineRPC = defineRPC;
+function defineRPCContextCreator(creator) {
+    return creator;
+}
+exports.defineRPCContextCreator = defineRPCContextCreator;

package/serverless/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./define-api";
 export * from "./define-rpc-router";
-export * from "./create-rpc-client";
 export * from "./error-codes";

package/serverless/index.js

@@ -12,5 +12,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./define-api"), exports);
 __exportStar(require("./define-rpc-router"), exports);
-__exportStar(require("./create-rpc-client"), exports);
 __exportStar(require("./error-codes"), exports);

package/serverless/rpc-client.d.ts

@@ -0,0 +1,3 @@
+export declare const useRPCQuery: <TPath extends string>(pathAndInput: [TPath, (null | undefined)?], opts?: import("@trpc/react").UseTRPCQueryOptions<TPath, RPCRouter, RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>> | undefined) => import("react-query").UseQueryResult<RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>>;
+export declare const useRPCMutation: <TPath_1 extends string>(path: TPath_1 | [TPath_1], opts?: import("@trpc/react").UseTRPCMutationOptions<RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>, RPCRouter> | undefined) => import("react-query").UseMutationResult<RPCRouter, import("@trpc/react").TRPCClientErrorLike<RPCRouter>, RPCRouter, unknown>;
+export declare const rpcClient: import("@trpc/react").TRPCClient<RPCRouter>;

package/serverless/rpc-client.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rpcClient = exports.useRPCMutation = exports.useRPCQuery = void 0;
+var react_1 = require("@trpc/react");
+// @ts-ignore
+var _a = (0, react_1.createReactQueryHooks)({
+    // @ts-ignore
+    url: process.serverlessEndpoint + "/api/trpc",
+}), useQuery = _a.useQuery, useMutation = _a.useMutation, createClient = _a.createClient;
+exports.useRPCQuery = useQuery;
+exports.useRPCMutation = useMutation;
+exports.rpcClient = createClient({
+    // @ts-ignore
+    url: process.serverlessEndpoint + "/api/trpc",
+});

package/serverless-template/_utils/PageMeta.tsx

@@ -10,7 +10,7 @@ export function PageMeta(props: Props) {
       {props.title?.map((tag, i) => (
         <title key={"title" + i}>{tag.__code}</title>
       ))}
-      {props.style?.map((tag, i) => {
+      {/* {props.style?.map((tag, i) => {
         return (
           <style
             key={"style" + i}
@@ -31,11 +31,12 @@ export function PageMeta(props: Props) {
             dangerouslySetInnerHTML={{ __html: tag.__code }}
           />
         )
-      })}
+      })} */}
       {props.meta?.map((tag, i) => {
         return <meta key={"meta" + i} {...tag} />
       })}
       {props.link?.map((tag, i) => {
+        if (tag.rel === "stylesheet") return <Fragment key={"link" + i} />
         return <link key={"link" + i} {...tag} />
       })}
     </Head>

package/serverless-template/next.config.js

@@ -1,8 +1,9 @@
 const withTM = require("next-transpile-modules")
-const { resolve } = require("path")
+const { resolve, join } = require("path")
 const { DefinePlugin } = require("webpack")
 const settings = require("./ed.config.json")
 const { getRepoName } = require("eddev/utils/getRepoName")
+const { existsSync } = require("fs")
 
 module.exports = (() => {
   const cwd = process.cwd()
@@ -58,6 +59,10 @@ module.exports = (() => {
       define.definitions["process.themePath"] = JSON.stringify(themePath)
       define.definitions["process.devUI"] = settings.devUI === "enabled"
       define.definitions["process.serverlessEndpoint"] = JSON.stringify("/")
+
+      const rpcExists =
+        existsSync(join(process.cwd(), "api/_rpc.ts")) || existsSync(join(process.cwd(), "api/_rpc/index.ts"))
+      define.definitions["process.rpcEnabled"] = rpcExists ? "true" : "false"
       // config.plugins.push(
       //   new DefinePlugin({
       //     "process.serverless": "true",

package/serverless-template/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "@trpc/next": "^9.19.0",
+    "@trpc/server": "^9.19.0"
   },
   "devDependencies": {
     "@types/react": "17.0.39",

package/serverless-template/pages/_app.tsx

@@ -7,8 +7,9 @@ import { useMemo } from "react"
 import { useRouter } from "next/router"
 import { DevUILoader } from "eddev/dev-ui/loader"
 import { PageMeta } from "../_utils/PageMeta"
+import { withTRPC } from "@trpc/next"
 
-function MyApp({ Component, pageProps }: AppProps) {
+function Root({ Component, pageProps }: AppProps) {
   if (!pageProps.appData) return <div />
 
   const appData = useMemo(() => {
@@ -34,4 +35,16 @@ function MyApp({ Component, pageProps }: AppProps) {
     </ServerlessAppDataProvider>
   )
 }
-export default MyApp
+
+// @ts-ignore
+export default process.rpcEnabled
+  ? withTRPC({
+      config({ ctx }) {
+        return {
+          // @ts-ignore
+          url: process.serverlessEndpoint + "api/trpc",
+        }
+      },
+      ssr: false,
+    })(Root)
+  : Root

package/serverless-template/pages/api/trpc/[...trpc].ts

@@ -0,0 +1,31 @@
+// @ts-ignore
+import { router, createContext } from "../../../api/_rpc"
+import * as trpcNext from "@trpc/server/adapters/next"
+import type { NextApiRequest, NextApiResponse } from "next"
+
+const handler = trpcNext.createNextApiHandler({
+  router: router,
+  createContext: createContext,
+})
+
+export default function (req: NextApiRequest, res: NextApiResponse) {
+  console.log("Req", req.method)
+  // if (req.method === "OPTIONS") {
+  const origin = req.headers.origin
+  if (origin) {
+    console.log(origin)
+    if (origin.match(/\.local$/)) {
+      res.setHeader("Access-Control-Allow-Origin", "*")
+      res.setHeader("Access-Control-Request-Method", "*")
+      res.setHeader("Access-Control-Request-Method", "OPTIONS, GET, POST")
+      res.setHeader("Access-Control-Allow-Headers", "*")
+      if (req.method === "OPTIONS") {
+        res.writeHead(200)
+        res.end()
+        return
+      }
+    }
+  }
+  // }
+  return handler(req, res)
+}

package/style/createStitches.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultThemeMap } from "@stitches/react";
 import { ConfigType } from "@stitches/core/types/config";
 import { Properties as CSS } from "csstype";

package/serverless-template/pages/api/hello.ts

@@ -1,10 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
-  res.status(200).json({ name: 'John Doe' })
-}