roxiness / routify-starter Goto Github PK

View Code? Open in Web Editor NEW

199.0 199.0 55.0 4.29 MB

Home Page: https://example.routify.dev/

HTML 1.05% CSS 2.17% JavaScript 30.31% Svelte 66.47%

routify-starter's People

Contributors

Stargazers

Watchers

Forkers

rixo ptzagk yus-ham wolfr kevmodrome keithporcaro si87 grilloz f-elix schugs dominikg wighawag alteredorange jadbox miridius bamroberts stephenstrickland rockfreak denismorozov majorbreakfast josefaidt harshadaju steffrainville braebo lamualfa egnus nurdiansyah mauroporras www-chique pedrozatta alicantokdemir lgs alesvaupotic rockmanexe1994 grsmto domvinyard parsnip-ai romainstraet conoroshea1996 darrylyeo mcdba clschalkwyk douganderson444 kevinsia dahburj doraemon-daffodils zahreva sunilroyy007 hyeongyuan xvburak agussander oschina stokesman sumitkp11

routify-starter's Issues

Confusing error when using tailwind/smelte JS

I was using tailwind and Smelte JS in my project, initially I was using the new typescript template that svelte has officially uploaded. However this setup worked only while I was in development, when it came to creating the build routify kept saying no dist folder found. I tried specifying dir name to routify but it wasn't working so I decided to pull this template and then convert it to TS.

I've added all my dependencies and from the look of it everything seems to be working except that theres no styling. I followed Smeltes preffered way of adding it to the project, by adding this line to the rollup file(which is apparently the base.config.js file in the case of this template I think).

  const _rollupConfig = {
        inlineDynamicImports: !dynamicImports,
        preserveEntrySignatures: false,
        input: 'src/main.ts',
        output: {
            name: 'routify_app',
            sourcemap: true,
            ...outputConfig
        },
        plugins: [

                      . . . 


           smelte({ 
                purge: !production,
                output: "static/global.css", // it defaults to static/global.css which is probably what you expect in Sapper 
                postcss: [], // Your PostCSS plugins
                whitelist: [], // Array of classnames whitelisted from purging
                whitelistPatterns: [], // Same as above, but list of regexes
                tailwind: {
                    future: {
                        removeDeprecatedGapUtilities: true,
                        purgeLayersByDefault: true,
                    },
                    theme: {
                        colors: {
                            "dark-blue": "#2A2F39", 
                            "light-blue": "#303642",
                            "deep-blue":"#20242b",
                            "highlight": "#ec6e00"
                        },
                        transitionProperty: {
                            'height': 'height',
                            'spacing': 'margin, padding',
                        }
                    },
                    colors: { 
                        primary: "#ec6e00",
                        secondary: "#009688",
                        error: "#f44336",
                        success: "#4caf50",
                        alert: "#ff9800",
                        blue: "#2196f3",
                        dark: "#2A2F39",
                        background: "#303642"
                    }, // Object of colors to generate a palette from, and then all the utility classes
                    variants: {
                        textColor: ['hover',],
                        textDecoration: ['hover'],
                        transitionProperty: ['responsive'],
                        borderColor: ['focus-within'],
                    }
                },

Now nothing goes wrong until this point, however you have to add import "smelte/src/tailwind.css" somewhere in your App.svelte so the css starts actually working. However the minute I add this one line I get this error .

TypeError: 'set' on proxy: trap returned falsish for property '../../static/global.css'
    at /home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:910:35
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:19:24)
    at _next (/home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:41:9)
    at /home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:48:7
    at new Promise (<anonymous>)
    at /home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:37:12
    at Object.generateBundle (/home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:920:9)
    at _callAsyncHook (/home/taha-firoz/Documents/routify-starter/node_modules/nollup/lib/impl/PluginLifecycle.js:11:31)
    at callAsyncSequentialHook (/home/taha-firoz/Documents/routify-starter/node_modules/nollup/lib/impl/PluginLifecycle.js:49:24)

I read somewhere these TypeError: 'set' on proxy: trap returned falsish for property errors come up when TS is in strict mode. But I haven't specified strict mode anywhere, neither can I see it specified in my tsconfig.json. I'm kind of stumped at this point because I really have to deploy in a few days and really wasn't expecting exporting a final build to be a problem. I would really appreciate any help I can get with this issue.

Export

It looks like there is an export option for static sites but I don't see it in the package.json. Is this something that has to be added?

Hash and cache assets

It would be nice if the images, CSS, etc. had hashes in the file names so that you could cache them with a long lived expiration, easily serve them over a CDN, etc.

I'm not super familiar with Rollup, so am not sure what the best plugin for this is. Maybe something like https://github.com/rollup/plugins/tree/master/packages/url or https://github.com/sormy/rollup-plugin-smart-asset

prerendered template not handle click on Safari, iPhone

Hello,
I builded the routify-started and deployed on the apache server. Is served as prerendered.
But on the iPhone Safari browser is not clickable. It is possible to click only on the < a > tags.
In the same time the https://example.routify.dev/ have not this problem.

I don't know if is related to the template, routify or svelte. But I spended a lot of time to found the problem, and I will realy appreciate Your help.

Tests examples

I would like to have some tests for the examples

Starter template configuration is opaque

You have buried the Rollup configuration in a script that also builds it up dynamically. I can no longer look in one place to see what my Rollup configuration is. I have to try to trace a complex function to figure out what configuration will result.

This is awful, and makes it very hard to integrate Routify into an existing project. Like many developers, I have other things going on in my build process and my bundler, and can’t blindly adopt your template. With the sparse documentation, I’m sunk.

Routify itself is magnificent. It’s the best Svelte router out there. But it’s nearly impossible for me to implement. I’ve abandoned it once already, but came back for automatic page-level code splitting. Now I’m grouchy and I don’t know what do.

Looking for a cleaner example, maybe. Maybe Roxi helps with this, not sure. I know the code is there, but no doc yet, so I’m back where I stared—trying to figure out how it works from the code.

how to build to a pure SPA?

hi,
sorry for bother you guys again, as I am a bit confussed, i have coded an app base on this start template, and now i want to build and export to a Single Page App, which everything works at client side.

i walk through the documents, and still don't find out how to build to spa, looks like i can only build to SSR or SSG?

thanks for help!

How to configure 3rd-party dependencies

How to configure 3rd-party dependencies and put

external: ['xxxxxxxxx'],
globals:

in rollup.config.js

Refresh does not work on dynamic routes

It seems that refreshing on dynamic routes leads to a 404, such as on:

Is this a known issue?

ASK - How to use a prefix on the assets and dist files?

For some reason, i can't use the root path as the public URL to deliver the Routify assets. I need to give a prefix URL to each of the Routify assets. I have tried to change some config in assets/__app.html file. But, the new configuration only work in build mode (production), and not working in development mode using Rollup or Nollup (i think because the both of them has their own servers).

How do i solve this problem?

Default structure

assets/__app.html

<link rel="manifest" href="/manifest.json">
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="modulepreload" href="/build/main.js" />

<script type="module" src="/build/main.js"></script>

URL

/build/bundle.css
/build/main.js
/404.svg
/__app.html
/index.html
/ - Single Endpoint to handle the whole of Client Application that processed in server side using tossr

Server

app.use(express.static('dist'))
app.get('*', handleSsr)

Modified structure

assets/__app.html

<link rel="manifest" href="/public/manifest.json">
<link rel='stylesheet' href='/public/build/bundle.css'>
<link rel="modulepreload" href="/public/build/main.js" />

<script type="module" src="/public/build/main.js"></script>

URL

/public/build/bundle.css
/public/build/main.js
/public/404.svg
/public/__app.html
/public/index.html
/ - Single Endpoint to handle the whole of Client Application that processed in server side using tossr (nothing has changed)

Server

app.use('/public', express.static('dist'))
app.get('*', handleSsr)

Service worker not implemented

A few things:

In serviceworker.svelte, it should be sw.js and not serviceworker.js
In App.svelte there is no reference to the service worker
Even if I correct the reference in serviceworker.svelte, and import it into my _layout.svelte, and put sw.js in assets, you receive error in the console as below:

ServiceWorker script evaluation failed

Warning about mixed content when loading TVMaze images

Chrome is complaining about loading images from an HTTP source, from an HTTPS-served page.

The problem appears to be related to the image urls returned from the TVMaze API, which start with http://, although https:// versions of the same URLs also seem to work.

The needed change would be somewhere around this <img src>, where the url can be https-prefixed if served from an https domain: https://github.com/sveltech/routify-starter/blob/master/src/pages/example/api/%5BshowId%5D.svelte#L24

"npm run build" command does not work: build fails

src/main.js → dist/build...
[!] TypeError: name.replace is not a function
TypeError: name.replace is not a function
at sanitizeFileName (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:65:17)
at isPlainPathFragment (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:81:9)
at renderNamePattern (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:10897:10)
at Chunk$1.generateId (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:11145:27)
at Bundle$1.assignChunkIds (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:12424:34)
at Bundle$1.addFinalizedChunksToBundle (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:12384:14)
at Bundle$1.generate (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:12368:24)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at handleGenerateWrite (C:\Users\henry\Desktop\Development\routify template\node_modules\rollup\dist\shared\rollup.js:19946:23)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:app: routify -b && rollup -c
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:app script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\henry\AppData\Roaming\npm-cache_logs\2020-11-23T01_56_01_611Z-debug.log
ERROR: "build:app" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: run-s build:*
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\henry\AppData\Roaming\npm-cache_logs\2020-11-23T01_56_01_694Z-debug.log

Don't depend on unpkg

This is a feature request.

Currently the output of build includes this:

	<script type="module" defer="" src="https://unpkg.com/[email protected]/dist/index.mjs?module" data-main="/build/main.js"></script>
	<script nomodule="" defer="" src="https://unpkg.com/dimport/nomodule" data-main="/build/main.js"></

This works well for some use cases, but badly for others - many projects want to be fully \ runnable with just the build output, without dependency on code hosted "somewhere out there".

A better default (assuming a switch is not warranted) would be to copy whatever code is needed, to the dist output.

Following Routify-tailwind instructions, throws error

Pardon me for being a newbie at this. I was just trying to follow the instructions at https://routify.dev/examples/use-tailwind-css. And I stumble upon an error.
I am pretty sure all of you out there can point me to the right direction.

$ npx @roxi/routify init && npx routify-tailwindcss
[Routify] Fetching template
> cloned roxiness/routify-starter#master
[Routify] Installing dependencies
[Routify] Run "npm run dev" to start the server.
Installing dependencies...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/autoprefixer
npm ERR!   dev autoprefixer@"9" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer autoprefixer@"^10.0.2" from [email protected]
npm ERR! node_modules/tailwindcss
npm ERR!   dev tailwindcss@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\chique\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chique\AppData\Local\npm-cache\_logs\2020-12-09T09_27_55_563Z-debug.log
Creating config files...

tailwind.config.js created!

postcss.config.js created!

./src/tailwind.css created!

tailwind.css added to App.svelte

rollup.config.js was replaced.

Tailwindcss setup success! Try using Tailwindcss classes in .svelte files. And run "npm run dev:nollup". It just works.

And thereafter, trying to run


chique@Chique-DW2 MINGW64 /d/Development/Website_Backup/new/routify-tailwind
$ npm run dev:nollup
npm ERR! missing script: dev:nollup

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chique\AppData\Local\npm-cache\_logs\2020-12-09T09_28_33_469Z-debug.log

chique@Chique-DW2 MINGW64 /d/Development/Website_Backup/new/routify-tailwind
$ npm run dev

> [email protected] dev
> run-p routify nollup


> [email protected] routify
> routify


> [email protected] nollup
> nollup -c

[Routify] Watching src/pages
\scripts\base.config.js
Error: ENOENT: no such file or directory, open 'D:\Development\Website_Backup\new\routify-tailwind\scripts\base.config.js'
npm ERR! code 1
npm ERR! path D:\Development\Website_Backup\new\routify-tailwind
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c nollup -c

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chique\AppData\Local\npm-cache\_logs\2020-12-09T09_28_53_096Z-debug.log
[Routify] Generated routes in 1 ms
ERROR: "nollup" exited with 1.
npm ERR! code 1
npm ERR! path D:\Development\Website_Backup\new\routify-tailwind
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c run-p routify nollup

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chique\AppData\Local\npm-cache\_logs\2020-12-09T09_28_53_238Z-debug.log

New rollup.config.js causes infinite rebuild

When I used the new rollup config, it just repeats building main.js and sw.js over and over:
https://github.com/sveltech/routify-starter/blob/master/rollup.config.js

Debugging "Your app should probably have loaded by now"

After modifying the starter template and running npm run dev, I often get the error message from the splash screen "Your app should probably have loaded by now". There's nothing helpful logged in the console or the terminal where I ran npm run dev. How do I know what's going on?

Here's what I get from npm run build && npm run serve:

TypeError: Cannot read property 'URL' of null
    at new XMLHttpRequestImpl (D:\Git\FoodTruck\client\node_modules\jsdom\lib\jsdom\living\xhr\XMLHttpRequest-impl.js:110:32)
    at Object.setup (D:\Git\FoodTruck\client\node_modules\jsdom\lib\jsdom\living\generated\XMLHttpRequest.js:55:12)
    at new XMLHttpRequest (D:\Git\FoodTruck\client\node_modules\jsdom\lib\jsdom\living\generated\XMLHttpRequest.js:72:22)
    at eval (eval at <anonymous> (D:\Git\FoodTruck\client\node_modules\@sveltech\ssr\ssr.js:64:24), <anonymous>:15:3912307)
    at new Promise (<anonymous>)
    at SB (eval at <anonymous> (D:\Git\FoodTruck\client\node_modules\@sveltech\ssr\ssr.js:64:24), <anonymous>:15:3912206)
    at VB (eval at <anonymous> (D:\Git\FoodTruck\client\node_modules\@sveltech\ssr\ssr.js:64:24), <anonymous>:15:3916011)
    at async G (eval at <anonymous> (D:\Git\FoodTruck\client\node_modules\@sveltech\ssr\ssr.js:64:24), <anonymous>:15:3929939)
(node:6704) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createElement' of undefined
(node:6704) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3) 
(node:6704) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The website seems to run fine after building and deploying, however.

Impossible to go back to previous page from /example/transition

The link redirects to /example/transitions/tabs/home , from which trying to go back triggers the scaling animation again, not actually going back to /example/.

Errors using npx to install `auth` template

Hi,

in my environment

Operating System (or Browser): Mac OS High Sierra (Chrome Version 88.0.4324.182 (Official Build) (x86_64))
Node Version (if applicable): v12.18.0

when I run

npx @sveltech/routify init --branch auth

npx @roxi/routify init --branch auth

I get these errors


[Routify] Fetching template
npx: installed 1 in 0.947s
> cloned roxiness/routify-starter#auth
[Routify] Installing dependencies
ls
internal/modules/cjs/loader.js:969
  throw err;
  ^


Error: Cannot find module 'nan'
Require stack:
- /Users/francisco/Documents/dev/MIMIC/roxi/node_modules/glob-watcher/node_modules/fsevents/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at [eval]:1:1
    at Script.runInThisContext (vm.js:120:20)
    at Object.runInThisContext (vm.js:311:38)
    at Object.<anonymous> ([eval]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at evalScript (internal/process/execution.js:94:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/francisco/Documents/dev/MIMIC/roxi/node_modules/glob-watcher/node_modules/fsevents/[eval]'
  ]
}
gyp: Call to 'node -e "require('nan')"' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/francisco/.nvm/versions/node/v12.18.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 17.7.0
gyp ERR! command "/Users/francisco/.nvm/versions/node/v12.18.0/bin/node" "/Users/francisco/.nvm/versions/node/v12.18.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/francisco/Documents/dev/MIMIC/roxi/node_modules/glob-watcher/node_modules/fsevents
gyp ERR! node -v v12.18.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
[Routify] Run "npm run dev" to start the server.

Not sure if this is leading to other errors but so that you now

If global.css is @imported by App.svelte, it doesn't need to be in /static

Getting it both @imported and thus bundled, and also served as a static file, is pointless and confusing.

routify-starter/src/App.svelte

Lines 6 to 8 in 88ccac3

    
           <style  global> 
        
             @import "../static/global.css"; 
        
           </style>

https://github.com/roxiness/routify-starter/blob/master/static/global.css

Could just git mv static/global.css src and @import ./global.css.

ParseError: {directory}/src/pages/@roxi/routify.js

What can I say? It was working fine 3/4 hours ago... Now that I made a freaking template (spent the WHOLE MORNING in it), added typescript, tailwind, prettier, eslint and axios and shared with people that are certainly more lazy then I am, NOW it decides to break. ¬¬''

I'd say it was my project but this is happening even when I clone YOUR project directly from github.

ParseError: /home/analu/Documents/Projects/src/pages/@roxi/routify.js
Error: ENOENT: no such file or directory, open '/home/analu/Documents/Projects/src/pages/@roxi/routify.js'
    at compileModule (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/impl/NollupCompiler.js:116:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async compileInputTarget (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/impl/NollupCompiler.js:138:5)
    at async Object.compile (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/impl/NollupCompiler.js:235:31)
    at async generateImpl (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/index.js:13:21)
ParseError: /home/analu/Documents/Projects/src/pages/@roxi/routify.js
Error: ENOENT: no such file or directory, open '/home/analu/Documents/Projects/src/pages/@roxi/routify.js'
    at compileModule (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/impl/NollupCompiler.js:116:19)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async compileInputTarget (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/impl/NollupCompiler.js:138:5)
    at async Object.compile (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/impl/NollupCompiler.js:235:31)
    at async generateImpl (/home/analu/Documents/Projects/routify-starter/node_modules/nollup/lib/index.js:13:21)

Housekeeping check double dependency

Unable to manually deploy to netlify

When initializing a fresh copy of this starter template, I am unable to deploy to netlify via npm run deploy:netlify. I recieve the following error from the netlify CLI: Unauthorized.

I believe the error is caused .netlify/state.json and the existing siteId within the file. Removing this file and running npm run deploy:netlify works as expected. This /.netlify file must have been accidentally committed during the creation of this template.

Consider preserveEntrySignatures: false

When I visit https://routify.dev/ there are two main.js files. First there's main.js and then it requests main-cd4adf5d.js. This is undesirable for two reasons:

main.js cannot be cached since it does not have a hash in the filename like main-cd4adf5d.js does
these files are requested sequentially which delays loading time

The first main.js file doesn't really do anything. It'd be nicer if these two files were combined into a single file

In the Sapper application template these files would be combined by Rollup because of the preserveEntrySignatures: false option. The Rollup docs say:

This is the recommended setting for web apps where the entry chunks are to be placed in script tags as it may reduce both the number of chunks and possibly the bundle size.

Where deploy command is defined?

In SSR and pre-Rendering section it says you can run npm run deploy:(now|netlify) to deploy the Routify Application. But i can't find any deploy command in package.json file. Is there a scripts missing?

Is there any explanation about how I deploy the Routify Application to Vercel server?

What kind of settings should i make?

npm run dev with error

hi,

sorry i am newbie here, i install the starter template follow the instructs, and after i run "npm run dev" i got :

no such file or directory, open '/home/ubuntu/sites/routify_app/scripts/base.config.js,

i try to search from issues and else where, but i got no answer for this, anyone please help?

thanks.

Opt out of SSR

Hi
How do i opt out of ssr mode as it doesn't play nicely with firebase which i am using in my application, or what version of firebase is best to use with this

Rollup Build Environment

Why Routify Starter Template use process.env.ROLLUP_WATCH in rollup.config.js to detect production mode instead use process.env.BUILD as written in official Rollup documentation? See Rollup Environment section.

I think the use of process.env.BUILD is more semantic and better than use process.env.ROLLUP_WATCH because I assume that there are additional Rollup plugins or user detect production mode via process.env.BUILD. BUILD is more standardized and widely used.

I can make a pull request to change some configuration if needed.

Sorry for the mistakes. Thanks.

Netlify deloy stuck on created dist/sw.js

Bug description
When deploying to Netlify the build process will get stuck on created dist/sw.js.

package.json

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "run-p routify rollup",
    "dev:nollup": "run-p routify nollup",
    "dev-dynamic": "cross-env BUNDLING=dynamic npm run dev",
    "build": "routify -b && rollup -c && routify export && workbox injectManifest",
    "serve": "spassr --serve-spa --serve-ssr",
    "export": "routify export",
    "build:docker": "npm run build && ./scripts/docker/docker-build.sh",
    "deploy:vercel": "cd scripts/vercel && npm run deploy",
    "deploy:netlify": "cd scripts/netlify && npm run deploy",
    "rollup": "rollup -cw",
    "nollup": "nollup -c",
    "routify": "routify"
  },
  "devDependencies": {
    "@rollup/plugin-alias": "^3.1.1",
    "@rollup/plugin-commonjs": "^13.0.0",
    "@rollup/plugin-node-resolve": "^8.1.0",
    "@simonwep/pickr": "^1.7.4",
    "axios": "^0.20.0",
    "concurrently": "^5.2.0",
    "cross-env": "^7.0.2",
    "deepdash": "^5.3.0",
    "del": "^5.1.0",
    "file-saver": "^2.0.2",
    "nollup": "^0.12.0",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.18.1",
    "rollup-plugin-copy-watch": "0.0.1",
    "rollup-plugin-hot": "^0.0.31",
    "rollup-plugin-livereload": "^1.3.0",
    "rollup-plugin-scss": "^2.6.0",
    "rollup-plugin-svelte": "^5.2.3",
    "rollup-plugin-svelte-hot": "^0.10.0",
    "rollup-plugin-terser": "^6.1.0",
    "spassr": "^1.1.2",
    "svelte-portal": "^1.0.0"
  },
  "dependencies": {
    "@rollup/plugin-replace": "^2.3.3",
    "@sveltech/routify": "^1.9.7",
    "svelte": "^3.23.2",
    "svelte-preprocess": "^4.0.8",
    "workbox-cli": "^5.1.3"
  },
  "routify": {
    "extensions": "svelte,html,svx,md",
    "dynamicImports": true,
    "routifyDir": ".routify"
  }
}

Version
Routify 1.9.7
Svelte 3.23.2

Additional information
Netlify build log: https://pastebin.com/raw/cbk5DMP3
Project repo: https://github.com/Gibbu/Website

Proposal: tag version for "Releases" subscription

Proposal.

It would be amazing for many people to only subscribe to "Releases only" instead of "Watching" in order to stay updated on the latest news in the template and not receive emails for all individual issues.

It would be enough just to use the tags I think, maybe only consecutive increases in version or date (e.g. 2020.05.01-1).

Can you consider the idea?

process is not defined when using @emotion/css

Problem

process is defined in the rollup.config.js file. Then why is the process variable undefined when run in the browser?

routify-starter/rollup.config.js

Line 78 in 6598b59

code: code.replace('process.env.NODE_ENV', `"${process.env.NODE_ENV}"`),

Error in Browser

Uncaught ReferenceError: process is not defined
    at eval (node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js:232)
    at Object.__impl (main.js:1059)
    at executeModuleImpl (main.js:182)
    at resolve_module (main.js:229)
    at main.js:223
    at Array.forEach (<anonymous>)
    at resolve_module (main.js:212)
    at main.js:223
    at Array.forEach (<anonymous>)
    at resolve_module (main.js:212)

Solution

In my internal project I use the rollup-plugin-inject-process-env plugin. You can merge the #90 PR if you agree.

Why ?

Because replacing a string typically with rollup-plugin-replace works in one case :

    console.log(process.env.NODE_ENV);

...but not in all other cases :

    console.log(process.env['NODE_ENV']);

    const { NODE_ENV, NODE_PORT } = process.env;
    console.log(NODE_ENV);

Worse : sometimes, such substitution :

    if (process.env.NODE_ENV === 'production') {

...will be expand to :

    if ('production' === 'production') {

...and make some linter complain.

semicolons in code

My eyes hurt due to all the missing semicolons. What's the guidance on this?

Nollup / Rollup not compiling external components

bug description

Dev will not compile external components, ie. either via

import MyComponent from '../../../../../my-package/src/MyComponent.svelte'

import MyComponent from 'my-package'
// where my-package is file:../my-package with "npm link"

In both cases, the only way to recompile changes is to restart dev script.

package.json

{
  "name": "eze",
  "version": "1.0.0",
  "@comments scripts": {
    "dev": "develop with blazing fast rebuilds",
    "dev:features": "develop with features like SSR and serviceworker enabled",
    "build": "run build scripts below",
    "build:app": "build single page application (SPA)",
    "build:static": "Generate static pages",
    "serve": "serve content in 'dist' folder",
    "rollup": "run the rollup bundler",
    "nollup": "run the nollup no-bundler",
    "routify": "run routify"
  },
  "scripts": {
    "dev": "run-p routify nollup api sass",
    "api": "nodemon --watch ../ezlib --watch ../ezeaze --watch ../ezapi dev.js",
    "sass": "node-sass src/global.sass assets/global.css static/global.css -w",
    "dev:ssr": "run-p routify rollup",
    "build": "run-s build:*",
    "build:app": "routify -b && rollup -c",
    "build:static": "spank",
    "serve": "spassr --ssr",
    "rollup": "rollup -cw",
    "nollup": "nollup -c",
    "routify": "routify"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^15.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@roxi/routify": "^2.12.4",
    "cookie-parser": "^1.4.5",
    "cross-env": "^7.0.2",
    "dayjs": "^1.10.4",
    "ezapi": "file:../ezapi",
    "ezeaze": "file:../ezeaze",
    "ezlib": "file:../ezlib",
    "fs-extra": "^9.0.1",
    "nollup": "^0.13.13",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.1.4",
    "postcss-import": "^13.0.0",
    "rollup": "^2.33.1",
    "rollup-plugin-hot": "^0.1.1",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^6.1.0",
    "rollup-plugin-svelte-hot": "^0.11.1",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-workbox": "^5.2.1",
    "spank": "^1.5.1",
    "spassr": "^2.2.0",
    "svelte": "^3.29.4",
    "svelte-preprocess": "^4.5.2",
    "tossr": "^1.3.1"
  },
  "routify": {
    "extensions": "svelte,html,svx,md"
  },
  "spassr": {},
  "spank": {
    "blacklist": [
      "/example/modal/basic/4"
    ]
  },
  "dependencies": {
    "@rollup/plugin-alias": "^3.1.2",
    "axios": "^0.21.1",
    "file-size": "^1.0.0",
    "query-string": "^7.0.0",
    "svelte-native-drag-drop": "^1.0.0",
    "svelte-tabular-table": "file:../svelte-tabular-table"
  }
}

SSR on netlify doesn't generate a displayable page

When I deploy this code on Netlify with SSR, I see the following output as plain text instead of rendered page:

{"statusCode":200,"body":"<!DOCTYPE html> ... bunch of stuff ...</html>\n<!--ssr rendered-->"}

e.g. the following:

When I try returning without the enclosing JSON object (e.g. taking away {statusCode: 200, ...}, I still see the output in plain text, just as a string.

As far as I can tell from the Netlify docs (https://docs.netlify.com/functions/build-with-javascript/) this looks right. Any idea what is going on here?

Transition problems in nested decorators

Right off the bat, I might be totally doing it wrong, as I am a newbie.
Following the transition documentation at Routify transition doc.
I cannot make the transition work if I nest the decorators.
But if I don't nest the decorators and just combine in only one, the transition works.

Here is my setup:

1. src/pages/_layout.svelte

<script>
	import _AuthGuard from "./_AuthGuard.svelte";
</script>
<slot decorator={_AuthGuard}/>

2. src/pages/_AuthGuard.svelte (copied from: https://routify.dev/docs/transitions)

<script>
  import { writable } from 'svelte/store'
  import { TabsTransition } from '@roxi/routify/decorators'
  const width = writable()
</script>

<div bind:offsetWidth={$width}>
  <slot decorator={TabsTransition} scoped={{ width }} />
</div>

And the transitions don't work.
The transition works, if I don't nest the decorator, and just use the TabsTransition directly at _layout.svelte (root level).

Any help would be appreciated.

Routify version: 2.7.3
I know there are more updates on the Routify, but when I do "npm outdated" it doesn't show up there. Am I supposed to do something there?

Deploying to Netlify - Could not resolve '../tmp/config'

No problems when building local, but on netlify i always get this error.
can someone help me here? what am i missing? thanks

Error: Could not resolve '../tmp/config' from node_modules/@sveltech/routify/runtime/utils.js
5:51:14 PM: Error: Could not resolve '../tmp/config' from node_modules/@sveltech/routify/runtime/utils.js
5:51:14 PM:     at error (/opt/build/repo/node_modules/rollup/dist/shared/node-entry.js:5400:30)
5:51:14 PM:     at ModuleLoader.handleResolveId (/opt/build/repo/node_modules/rollup/dist/shared/node-entry.js:12389:24)
5:51:14 PM:     at ModuleLoader.<anonymous> (/opt/build/repo/node_modules/rollup/dist/shared/node-entry.js:12277:30)
5:51:14 PM:     at Generator.next (<anonymous>)
5:51:14 PM:     at fulfilled (/opt/build/repo/node_modules/rollup/dist/shared/node-entry.js:38:28)

Need a better way to debug SSR errors

I'm having a hard time tracking down errors in SSR code right now. For example, if there is a runtime error on the SSR function, both options don't work particularly well:

With npm run dev:ssr, tossr appears to be fine, but has actually actually died and no longer responds to connections. The error does not appear anywhere.

Local data is > 24hrs old. Refreshing...
Successfully wiped local storage
User is logged out
Successfull wiped local firestore cache
LATxo0jkXeOji1KCpvCHpqfD2PE3 has logged in
Getting new data from firestore...
[tossr] /recipe/favicon_bw.png - 3503ms (rebuilt bundle)

with npm run serve the error appears but the spassr just dies, and does not print out the whole error. It is also annoying to debug because it requires a new npm run build to try again, which can take a while.

Local data is > 24hrs old. Refreshing...
Successfully wiped local storage
User is logged out
Successfull wiped local firestore cache
B2CkgahGccWKtzbzlhwJZZdS7m32 has logged in
Getting new data from firestore...
[tossr] /recipe/favicon_bw.png - 3317ms
node:internal/process/promises:227
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: Cannot read property 'phases' of undefined".] {

Happy to help with improvements to tossr, spassr or anything else to make this work.

Not sure about .github/workflows folder

This seems too specific to be in the starter?

Every time I start something new and put it on Github with no config I get CI errors.

Related to discussion about having an interactive CLI.

How to show alert on browser back button click event?

Please give me an example, me noob.

throw new ERR_INVALID_ARG_TYPE(name, 'string', value);

npm run dev

[email protected] dev [project-path]-routify
run-p routify nollup

[email protected] nollup [project-path]-routify
nollup -c

[email protected] routify [project-path]-routify
routify

internal/validators.js:125
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^

Seems '../.routify/routes' doesnt exist...but, If I change 'import { routes } from "../.routify/routes";' to 'import { routes } from "@roxi/routify/tmp/routes";' in App.svelte then the error just errs out on nollup -c

routify service exporter Error: Cannot find module dist/build/bundle.js

Hello,
I just started to use the routify, but I'm not able to build the application.
For the option dynamicImports: true, the routify exporter service finish in the error:
UnhandledPromiseRejectionWarning: Error: Cannot find module './dist/build/bundle.js'.

I think it is because in the exporter service is hardcoded the file name 'bundle.js', but the rollup config export as it is, the 'main.js'.
Renaming the main.js to bundle.js solve the problem,
but there is ssr that provide another one: UnhandledPromiseRejectionWarning: Error: SyntaxError: Unexpected token 'export'

export npm script missing from README

the subject says it all :)

I can't install from npx files at all whatever I do (clone, npx etc...)

it's frustrating!
Been working around for now a day.
I really don't understand: I am getting error around git.
Joined the discord, no one to help.
I would nice to have another way to get routify starter than just that particular one no?
Thanks in advance.

Uncomment service worker in main.js leads to error (2.x)

Mac OS X 10.15.7
Node 14.8.0

How to reproduce:

npx @sveltech/routify init --branch 2.x
open main.js > uncomment line 11-18
npm install
npm run dev
open localhost:5000
console error:

PrecacheController.js:55 Uncaught TypeError: entries is not iterable
    at PrecacheController.addToCacheList (PrecacheController.js:55)
    at precache (precache.js:50)
    at precacheAndRoute (precacheAndRoute.js:26)
    at sw.js:43
    at sw.js:98
addToCacheList @ PrecacheController.js:55
precache @ precache.js:50
precacheAndRoute @ precacheAndRoute.js:26
(anonymous) @ sw.js:43
(anonymous) @ sw.js:98
localhost/:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:5000/') with script ('http://localhost:5000/sw.js'): ServiceWorker script evaluation failed

Android theme color

routify-starter/static/__index.html

Line 9 in 7c81ee9

The theme color is hot pink, I think you might want a more neutral theme color or no theme color at all for a default template (this influences the UI look of Chrome on Android)

Deploy to Netlify not publishing css

I tried doing a Netlify deploy using the routify-starter template but for some reason the css files aren't getting deployed. They are in the /scripts/netlify/public directory so I would think npm deploy would publish them.

Also I think the .netlify directory should be in the .gitignore

Great work though - looking at using this instead of Sapper

TypeScript Support

I have created a script to use Typescript on Routify starter template. I took the reference from setupTypeScript.js in Svelte template. If the Routify contributors are interested, please take the script that I created according to your wishes. Sorry it can't be of any help. That's all I can do at this point. Thanks.

Github repository: https://github.com/lamualfa/routify-ts/
NPM package: https://www.npmjs.com/package/routify-ts

Dependencies out of date?

If I run a diff between this starter template and the roufity site there are some things that are not in sync in package.json:

sirv-cli
sveltech-routify@next vs ^1.0.3

What does @next refer to? Is that simply the latest version?

Editing global.css doesn't work

Steps to reproduce

Set up the starter template
Run server
Add some CSS to global.css

* {
  color: yellow;
}

Expected behavior

File is copied over to /dist/global.css with changes.

Current result

Nothing happens. The watcher doesn't seem to catch the file change.

When you restart the server, you get a change.

Scrolling back to same position in list view.

Is there any way to go back to the same position when navigating back to feed?

Following are the steps to recreate.

Step 0.
Resize the window to mobile view.

Step 1.
Goto https://example.routify.dev/example/transitions/tabs/feed

Step 2.
Click 9th card

Step 3.
Click Go back. The feed view loses its scroll position.