From badc7b116d6de464173dd0825c75c2221320090e Mon Sep 17 00:00:00 2001 From: Nick Reese Date: Thu, 3 Jun 2021 13:37:29 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20v1=20of=20@elderjs/plugi?= =?UTF-8?q?n-random?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/random/README.md | 41 ++++++++++++++++++ packages/random/Random.svelte | 19 +++++++++ packages/random/index.js | 78 +++++++++++++++++++++++++++++++++++ packages/random/package.json | 31 ++++++++++++++ 4 files changed, 169 insertions(+) create mode 100644 packages/random/README.md create mode 100644 packages/random/Random.svelte create mode 100644 packages/random/index.js create mode 100644 packages/random/package.json diff --git a/packages/random/README.md b/packages/random/README.md new file mode 100644 index 0000000..bd0d560 --- /dev/null +++ b/packages/random/README.md @@ -0,0 +1,41 @@ +# Elder.js Plugin: Random + +Easily preview a random page of a route by visiting a single url. This plugin should be used exclusively for development. + +## What This Plugin Does: + +When not running in `process.env.NODE_ENV === 'production'` this plugin does 2 things: + +1. It creates a `/random/` route that lists each of your routes linking to `/random/routeName/`. +2. It intercepts requests to `/random/routeName/` and randomly serves a page for that route. + +## Benefits: + +Say that you have a route named `blog` that has 1000 entries. With this plugin you could visit `/random/blog/` and randomly design against any blog page instead of just one as most designers would do. + +This is a simplistic example, but when building major sites with 10,000s of pages you'll often encounter scenarios where pages of the same route differ dramatically based on business logic. + +By using this plugin, you can design and debug against random pages of a route without having to change the URL. + +At ElderGuide.com we've found this is especially useful when working on a unified design across a route that can vary dramatically. + +Having found this useful, it has now become a core part of our development process across all projects. + +## Install + +```bash +npm install --save @elderjs/plugin-random +``` + +## Config + +```javascript +plugins: { + '@elderjs/plugin-random': {}, +} +``` + +## Notes: + +- When using this plugin with the `@elderjs/plugin-browser-reload` remember that `/random/routeName/` will generate a new page each refresh. This can be annoying when working on CSS issues or thing that require stateful experiences on the front end. +- If you are looking for the REAL url of a page look within `request.permalink` inside your `Layout.svelte` or `RouteName.svelte` files. diff --git a/packages/random/Random.svelte b/packages/random/Random.svelte new file mode 100644 index 0000000..8a84a1c --- /dev/null +++ b/packages/random/Random.svelte @@ -0,0 +1,19 @@ + + +
+ {#if routes.length > 0} + + {:else} + No routes registered to provide links to + {/if} +
diff --git a/packages/random/index.js b/packages/random/index.js new file mode 100644 index 0000000..738cb01 --- /dev/null +++ b/packages/random/index.js @@ -0,0 +1,78 @@ +const notProduction = process.env.NODE_ENV !== 'production'; +const plugin = { + name: '@elderjs/plugin-random', + description: 'Adds a /random/ page on previewer requests that displays all of the possible routes.', + init: (plugin) => {}, + routes: { + pluginRandom: { + data: () => {}, + template: 'Random.svelte', + permalink: ({ request, settings }) => { + if (request.slug && request.realRoute) return `/random/${request.realRoute}/`; + return `/random/`; + }, + all: async () => [{ slug: '/random/' }], + }, + }, + + hooks: [ + { + hook: 'allRequests', + name: 'addRandomAndDebug', + description: 'Adds /random/route/ requests to allRequests. Also adds /debug/ to all requests.', + priority: 50, // default + run: async ({ helpers, data, settings, request, allRequests, routes, db }) => { + if (notProduction && settings.server) { + const randomRequests = Object.keys(routes).reduce( + (out, route) => [...out, { slug: 'random', realRoute: route, route: 'pluginRandom' }], + [], + ); + return { + allRequests: [...allRequests, ...randomRequests], + }; + } + }, + }, + { + hook: 'request', + name: 'updateRandomRequestWithRealRequest', + description: 'Adjusts random requests to go to a real page and route', + priority: 70, // Higher priority incase other plugins also need to be run on the same request. + run: ({ settings, request, allRequests, routes }) => { + if (notProduction && settings.server && request.slug === 'random' && request.route === 'pluginRandom') { + // filter requests + const routeRequests = allRequests.filter((r) => r.route === request.realRoute); + + if (routeRequests && routeRequests.length > 0) { + // choose a random one + const randomRequest = Math.floor(Math.random() * (routeRequests.length - 1)); + // update the request + const request = routeRequests.slice(randomRequest, randomRequest + 1)[0]; + + const route = routes[request.route]; + return { + request, + route, + }; + } + } + }, + }, + { + hook: 'request', + name: 'addAllRequestsToDebugDataObject', + description: 'Adds the allRequests array to the data object for /debug/', + run: ({ helpers, data, settings, request, allRequests }) => { + if (notProduction && settings.server && request.slug === 'debug' && request.route === 'debug') { + return { + data: Object.assign({}, data, { + allRequests: [...allRequests], + }), + }; + } + }, + }, + ], +}; + +module.exports = plugin; diff --git a/packages/random/package.json b/packages/random/package.json new file mode 100644 index 0000000..6cf8b0c --- /dev/null +++ b/packages/random/package.json @@ -0,0 +1,31 @@ +{ + "name": "@elderjs/plugin-random", + "version": "0.1.38", + "description": "Easily preview a random page of a route by visiting a single url. This plugin should be used exclusively for development.", + "keywords": [ + "elderjs", + "svelte", + "elder", + "random", + "debug" + ], + "author": "Nick Reese ", + "homepage": "https://github.com/Elderjs/plugins#readme", + "license": "MIT", + "main": "index.js", + "directories": {}, + "files": [ + "index.js", + "Random.svelte" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/Elderjs/plugins.git" + }, + "scripts": { + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/Elderjs/plugins/issues" + } +}