ezypeeze / nuxt-neo Goto Github PK

Hi! I was trying out your module, but the createAction wasn't working, body was undefined.
So I installed express-bodyparser and added it to the middleware list, now it works.
Am I missing something or we should take care of our own parsers?

I've recently came across https://github.com/phero-hq/phero through https://blog.logrocket.com/phero-build-type-safe-full-stack-apps-with-typescript/ which is a project similar to nuxt-neo that solves some issues that nuxt-neo has. Namely:

• it can auto-generate type information from "controllers" that are written in typescript. It then also generates a "client" (similar to nuxt-neo) that can use those type information.
• it properly handles errors thrown on the server side so that even on the client side one can use instanceof to check type of the error. In nuxt-neo the behavior can be different whether call was made on the server or the client side and one type of error can mutate into a different type of error on the client unless there is some manual middleware code to handle that.

With that said, it's not really a replacement for nuxt-neo (yet) as it doesn't integrate with express (it starts its own backend server instead) and it doesn't have the feature that allows to perform pure function calls from the server-side -- it always makes a HTTP request. It also always makes a POST request instead of allowing to specify type of the HTTP method to use (which is not necessarily an issue unless maybe if someone expects caching in some cases).

This is just FYI. In theory we could adopt the logic to auto-generate types from TS code, like phero does but I don't think that we have resources for that. So instead maybe we can wait for phero to develop and then just provide a thin wrapper module for Nuxt for it (possibly as a separate package).

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	codecov
npm	eslint-loader
npm	eslint-plugin-node
npm	eslint-plugin-standard
npm	querystring
npm	standard-version

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): replace devdependency standard-version with commit-and-tag-version ^9.5.0
• chore(deps): update dependency path-to-regexp to v8
• chore(deps): update devdependency c8 to v10
• chore(deps): update devdependency eslint to v9
• chore(deps): update devdependency eslint-config-prettier to v9
• chore(deps): update devdependency eslint-plugin-ava to v15
• chore(deps): update devdependency eslint-plugin-promise to v7
• chore(deps): update devdependency eslint-plugin-standard to v5
• chore(deps): update devdependency jsdom to v25
• chore(deps): update devdependency nuxt to v3
• chore(deps): update devdependency prettier to v3
• chore(deps): update google-github-actions/release-please-action action to v4
• chore(deps): update typescript-eslint monorepo to v8 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update devdependency eslint-config-standard to v17

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace devdependency eslint-plugin-node with eslint-plugin-n ^14.0.0
• chore(deps): update dependency vuepress to ^1.9.10
• chore(deps): update all non-major dependencies (@nuxt/types, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, axios, body-parser, browserslist, c8, codecov, core-js, eslint, eslint-config-prettier, eslint-plugin-import, eslint-plugin-promise, express, nuxt, path-to-regexp, prettier, typescript)
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update devdependency ava to v6
• chore(deps): update devdependency axios to v1
• chore(deps): update devdependency eslint-plugin-vue to v9
• chore(deps): update devdependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

is it possible to have the Nuxt Context in the controller classes? (or whatever to be able to pass parameters to the controller class) (I need to retrieve the sequelize instance)
Thank you

With an endpoint like:

        getAction: {
            path: '/:foo',
            verb: 'GET'
        },

The foo might include a /, or some other (for example?), character that would break the API call when made on the client-side but it would work just fine when made on the server-side.

For it to work the user would have to encode it first (with encodeURI or encodeURIComponent) but that would then break the server-side API call because there would be nothing to decode the param in the handler.

I think that it can be fixed by just encoding the parameters in the module before making the client-side API call but I don't know if there is really a proper way of encoding that would work in all cases. Depending on the use case It's possible to encode "too much". For my apps encodeURIComponent would be a correct way to encode params but others might need more relaxed encodeURI or maybe even something custom so this should likely be customizable.

• When you have a route with a /:foo path and you don't pass the the foo param when making a request then a request with a literal /:foo path will be made. This seems non-ideal. The param is required so the error should probably be more explicit and triggered before the request is made?
• The module doesn't seem to declare support for optional params (/:foo?) but I think it should be able to support those. This kinda ties to the previous issue.

The project doesn't currently support Typescript since it is unable to map file names to routes. A pretty simple change has solved this issue for me and could be useful for others still using this package.

diff --git a/node_modules/nuxt-neo/lib/server_middleware/api.js b/node_modules/nuxt-neo/lib/server_middleware/api.js
index 8928d11..a78150d 100755
--- a/node_modules/nuxt-neo/lib/server_middleware/api.js
+++ b/node_modules/nuxt-neo/lib/server_middleware/api.js
@@ -104,7 +104,7 @@ function injectBodyParsers(options) {
 async function injectControllers(router, options) {
     for (const path of getControllerFiles(options.directory)) {
         const relativePath = path.replace(options.directory, '');
-        const routePrefix = relativePath.replace(/\/index|\.js/g, '').split('/').map(camelcaseToDashcase).join('/');
+        const routePrefix = relativePath.replace(/\/index|\.(js|ts)/g, '').split('/').map(camelcaseToDashcase).join('/');
 
         router.use(routePrefix, await createControllerRouter(path, options));
     };
diff --git a/node_modules/nuxt-neo/lib/utility/controllers.js b/node_modules/nuxt-neo/lib/utility/controllers.js
index bd5d5ee..be76113 100755
--- a/node_modules/nuxt-neo/lib/utility/controllers.js
+++ b/node_modules/nuxt-neo/lib/utility/controllers.js
@@ -138,7 +138,7 @@ async function controllerMappingRecursive(mapping, parts, onEmpty) {
 async function controllerMapping(directory, controllerValue) {
     const mapping = {};
     for (const path of getControllerFiles(directory)) {
-        const relativePath = path.replace(directory, '').replace(/\/index|\.js/g, '');
+        const relativePath = path.replace(directory, '').replace(/\/index|\.(js|ts)/g, '');
         const routePrefix = relativePath.split('/').map(camelcaseToDashcase).join('/');
 
         await controllerMappingRecursive(mapping, relativePath.substring(1).split('/'), async function () {

This issue body was partially generated by patch-package.

in In clientSideApiHandler the process.env object appears empty. I need to access the environment variables, what can I do?

/**
 * Runs possible error handler
 *
 * @param error
 * @returns {Function}
 */
function runErrorHandler(error) {
    return ErrorHandler && ErrorHandler(error) || Promise.catch(error);
}

Promise.prototype.catch() exists. Promise.catch() does not. Maybe this is supposed to be Promise.reject(error)?

After controlled is modified, Nuxt (soft) restarts but the runtime code is not updated so Nuxt has to be restarted manually to see the changes.

I thought that #15 will fix it but it doesn't.

I guess the root issue is that async imports are used and that messes up the dependency graph for "jiti".

Not sure if it's fixable but logging anyway.

The javascript files within the api directory currently only work when in CommonJS syntax. This is a bit annoying because with the recent Nuxt versions (ones that use jiti) it's possible to use the ES syntax pretty much everywhere else (including server middleware).

Nuxt 2.15.8