❤
npm
Sign UpSign In

waya
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published


logo

waya

Yet another builder

VSCode . TypeScript . React/Redux . Sass . Chrome

npm version dependencies

npm i -g waya



Index



Features

[ Back to index ]



Getting Start

mkdir app && cd app
waya

[ Back to index ]



Script

<root>/App.tsx will auto load when exists

[ Back to index ]

Router

[ Back to index ]

Actions

<root>/store.ts will auto load when exists

[ Back to index ]



style

<root>/style.scss will auto load when exists

[ Back to index ]

Themes

[ Back to index ]

light/dark theme

[{
  "name": "light",
  "vars": {
    "color-primary": "white"
  }
},{
  "name": "dark",
  "vars": {
    "color-primary": "black"
  }
}]

Or short for:

[{
  "color-primary": "white"
},{
  "color-primary": "black"
}]

[ Back to index ]

multi themes

[{
  "name": "red",
  "vars": {
    "color-primary": "red"
  }
},{
  "name": "blue",
  "vars": {
    "color-primary": "blue"
  }
}]

[ Back to index ]

Variables

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;
}

[ Back to index ]



Static

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

[ Back to index ]

Logo

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.

Badges

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 ]

preview

[ Back to index ]



VSCode

[ Back to index ]



Chrome

[ Back to index ]



cli

[ Back to index ]

Readme

Keywords

none

Package Sidebar

Install

npm i waya

Repository

github.com/HairyRabbit/waya

Homepage

github.com/HairyRabbit/waya#readme

Weekly Downloads

2

Version

0.0.3

License

MIT

Unpacked Size

127 kB

Total Files

71

Last publish

Collaborators

  • rabbitcc
Try on RunKit
Report malware