Yet another builder
VSCode . TypeScript . React/Redux . Sass . Chrome
npm i -g waya
mkdir app && cd app
waya
<root>/App.tsx
will auto load when exists
<root>/store.ts
will auto load when exists
<root>/style.scss
will auto load when exists
[{
"name": "light",
"vars": {
"color-primary": "white"
}
},{
"name": "dark",
"vars": {
"color-primary": "black"
}
}]
Or short for:
[{
"color-primary": "white"
},{
"color-primary": "black"
}]
[{
"name": "red",
"vars": {
"color-primary": "red"
}
},{
"name": "blue",
"vars": {
"color-primary": "blue"
}
}]
If <root>/style.json
provide, inject the root
selector to entrypoint and transform to json data to css properties. Like:
{
"color-primary": "lightblue"
}
Will transform to:
:root {
--color-primary: lightblue;
}
Static resource files can provide under /static
directory. Like:
/static
- /logo # logo file
- /icon # icons
- /font # web fonts
- /image # images
- /media # medias, like video and radio
- /other # other static files
Add logo can easy add a logo.svg
file to <root>
directory. At development, the file can used as favico, they will inject a simple <link>
tag to <head>
:
<head>
<link rel="icon" type="image/png" href="[DATAURL..]" />
</head>
At production, Use favicons to generate more kinds of favicons, output to <outroot>/static/logo
directory. It also inject <link>
for generated file to html.
<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-SIZE.png">
<link rel="apple-touch-startup-image" media="SIZE" href="/assets/apple-touch-startup-image-SIZE.png">
<link rel="icon" type="image/png" sizes="SIZE" href="/assets/favicon-SIZE.png">
<link rel="manifest" href="/assets/manifest.json">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title">
<meta name="application-name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-TileImage" content="/assets/mstile-SIZE.png">
<meta name="msapplication-config" content="/assets/browserconfig.xml">
<meta name="theme-color" content="#fff">
The logo entrypoint default resolved by /<root>\/logo.(svg|png|jpg)$/
, If not found, keep to find <root>/favicon.ico
. If also not found, fallback to use waya logo.
I recommend to use logo.svg
, If you want to display for yor app.
The logo svg file will transform to tsx based component. Other formats transform to base64 data url. For example:
import Logo from '@/logo.svg'
function Header() {
return <Logo />
}
import Logo from '@/logo.png'
function Header() {
return <img src={Logo} />
}
Hot reload was supported.
If you want can set badges to favico at runtime. The BadgeContext
provide a context help to setup badges. You can use BadgeProvider
and useBadge
hook to update badges value. For example:
import { useEffect } from 'react'
import { BadgeProvider, useBadge } from 'react-extra/runtime/badge'
function App() {
return (
<BadgeProvider value={initBadge}>
<Component />
</BadgeProvider>
)
}
function Component() {
const [ badge, setBadge ] = useBadge()
setBadge(badge + 1)
return <span>unread messages: {badge}</span>
}
Interface:
interface BadgeProvider {
readonly value: boolean | number
}
type badgeValue = BadgeProvider['value']
type setBadge = (value: BadgeProvider['value']) => void
function useBadge(): [ badgeValue, setBadge ]