I have an app with 2 screens:
List of Merchants: screen show a list of merchants
Single Merchant: screen with Tabs, each tab should show some widget and should have its own route
The routes are configured like this:
AutoRoute(
path: '/merchants',
name: 'MerchantsRoute',
page: EmptyRouterPage,
guards: [AuthGuard],
children: [
AutoRoute(path: '', page: MerchantsView, guards: [AuthGuard], initial: true),
AutoRoute(
path: ':id',
page: SingleMerchantView,
guards: [AuthGuard],
children: [
AutoRoute(path: 'dashboard', page: Dashboard, guards: [AuthGuard], name: 'MerchantDashboardRoute'),
AutoRoute(path: 'purchases', page: PurchasesList, guards: [AuthGuard], name: 'MerchantPurchasesRoute'),
AutoRoute(path: 'profile', page: PurchasesList, guards: [AuthGuard], name: 'MerchantProfileRoute'),
]
),
]
),
SinglMerchantView is the widget containing the AutoTabsScaffold and the TabBarView
Using flutter web, when I access directly (by typing directly the url in chrome) to:
/merchants ==> It works
/merchants/some_merchant_id ==> It works, showing correctly the SingleMerchantView with first tab selected and the Dashboard built
/merchants/some_merchant_id/dashboard ==> It doesn't work like expected. I'm expecting that the SingleMerchantView is first created, then it should create the Dashboard widget
What I see is that it's trying to create directly the widget Dashboard without creating the widget SingleMerchantView. As Dashboard widget is expecting a mandatory id property (which is normally injected by the parent SingleMerchantView) then the page fails
Any idea on how to fix this?
My understanding is that you need an EmptyRouterPage for each of the nestles. Something similar to this:
AutoRoute(
path: '/merchants',
name: 'MerchantsRoute',
page: EmptyRouterPage,
guards: [AuthGuard],
children: [
AutoRoute(path: '', page: MerchantsView, guards: [AuthGuard], initial: true),
AutoRoute(
name: 'SingleMerchantRouter',
path: ':id',
page: EmptyRouterPage,
guards: [AuthGuard],
children: [
AutoRoute(path: '', page: SingleMerchantView, guards: [AuthGuard]),
AutoRoute(path: 'dashboard', page: Dashboard, guards: [AuthGuard], name: 'MerchantDashboardRoute'),
AutoRoute(path: 'purchases', page: PurchasesList, guards: [AuthGuard], name: 'MerchantPurchasesRoute'),
AutoRoute(path: 'profile', page: PurchasesList, guards: [AuthGuard], name: 'MerchantProfileRoute'),
]
),
]
),
I haven't been able to test, but it is similar to an issue I had today.
I use to get the same issue with auto_route.
It seems to be a bug with the package...
Flutter-Web : How to access a page from the URL with auto_route
Related
I have just installed the vite-plugin-pwa and followed the documentation and have the following in my config
VitePWA( {
injectRegister: 'auto',
registerType: 'autoUpdate',
devOptions: {
enabled: true
},
strategies: 'generateSW',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,mp3}'],
sourcemap: true
},
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
manifest: {
name: 'Litreach',
short_name: 'Cluiche Litrithe',
start_url: "/",
display: "standalone",
lang: "ga",
description: 'Cluiche litrithe ina mbíonn ar an imreoir 5 fhocal a litriú gach lá. Cluintear na focail a rá sna 3 canúintí agus bíonn 5 iarracht agat an focal a litriú i gceart.',
theme_color: '#ffffff',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
"purpose": "maskable"
},
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
"purpose": "any"
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
}
],
dir: "ltr",
orientation: "portrait",
display_override: [
"standalone"
],
categories: [
"education",
"games"
]
}
})
However each time I bump the the package.json version number, the next time I go to load the app the application falls over. When I inspect the Network key I can see that the app is trying to load index.js?oldHashNumber and the only way I can get the app to load is manually pressing the refresh button on the browser.
I believe there is some problem with the Service Worker or my PWA configuration.
Should I try to destroy the Service Worker and all their caches and start again?
If so how should I do this?
I'm preparing the SPM package, with resources folder. When I compile it for device, it work ok and I got successful. But when I try to build to simulator, I got error: ... bundle format unrecognized, invalid, or unsuitable
What can be wrong?
Tried to make Resource folder empty - no result.
Package.swift
defaults variants with delete DerivenData - no result.
let package = Package(
name: "GPUVideo",
platforms: [
.macOS(.v10_13), .iOS(.v13),
],
products: [
.library(
name: "GPUVideo",
targets: ["GPUVideo"]),
],
dependencies: [
],
targets: [
.target(
name: "GPUVideo",
dependencies: [],
exclude: ["Metal"],
resources: [
.copy("Resources")
])
]
)
Solved by change: .copy on .process
resources: [
.process("Resources")
])
It is unclear to me why its helps
All tailwind styles are broken on the deployed version
Localhost
Deployed version
MY tailwind config :
module.exports = {
mode: "jit",
purge: [
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("#tailwindcss/forms"),
require("tailwind-scrollbar"),
require("tailwind-scrollbar-hide"),
],
};
Try disabling the JIT mode. Not sure how you are adding classes to tags, but if its dynamic JIT doesn't work properly. I faced similar issue during my recent development.
module.exports = {
purge: [
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("#tailwindcss/forms"),
require("tailwind-scrollbar"),
require("tailwind-scrollbar-hide"),
],
};
I am getting the error Uncaught TypeError: regenerator.mark is not a function
I checked bundle generated regenerator is { __esModule: true }
seems #babel/plugin-transform-runtime, it's not able to inject runtime.js in a bundle.
here's Rollup config:-
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: `public/build/${bundleName}`,
},
plugins: [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
preprocess: preprocess(),
}),
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: 'node_modules/core-js/**',
presets: [
[
'#babel/preset-env',
{
// debug: true,
useBuiltIns: 'entry',
corejs: '3',
targets: {
browsers: ['safari >= 5', 'ie >= 11', 'not dead'],
},
},
],
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
[
'#babel/plugin-transform-runtime',
{
useESModules: false,
},
],
],
}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
includePaths(includePathOptions),
production && terser(),
production && gzipPlugin(),
],
};
I'm currently developing a mobile app with Ionic 4. I build it with Ionic CLI but I did a blank project. I created some component (like login, signup...) and after that, I added Tabs from Ionic.
My problem is, Ionic Tabs are presents only on pages in tabs.router.module.ts. How can I do to display Tabs on all pages ?
Except them, every component are in app-routing.module.ts, I tried to cut and paste them in tabs.router.module.ts but I'm not sure that's a good thing to do.
tabs.routes.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home-page/tab1.module#HomePageModule'
}
]
},
{
path: 'game/new',
children: [
{
path: '',
loadChildren: '../game/create-game-page/tab2.module#CreateGamePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
];
For the moment my Tabs works, but I'm not sure to understand how they perfectly work. Thank you for your help.
Adding your routes as children to tabs in tab router file will let you acheive your goal.
If you want to display your tabs on every page put them into your app.component.html file.
Like:
<ion-app>
<ion-tab-button tab="tab1">
<ion-label>Label1</ion-label>
<ion-icon name="search"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Label2</ion-label>
<ion-icon name="card"></ion-icon>
</ion-tab-button>
</ion-app>
Don't forget to create your Routes and your Routing in your app-routing.module.ts now.