this project is a companion kit to trixion.
its purpose is to be both a demonstration of trixion usage,
and also to turbo charge you next project.
with a matching spirit to trixion's one, this is relatively light weight project.
- get the latest release tar.gz/zip file and extract
npm install
- clean unnecessary files like README etc...
npm run clean
- npm run dev
- open browser at
localhost:4040
- start working
project-root
├─┬ src
│ ├── assets/ - static files that will be included in dist folder
│ ├── components/ - components with their specific styles
│ ├── logic/ - put here your business logic, selectors, actions etc
│ ├── styles/ - anything that is related to styling globally goes here
│ │ └── icons/ - any .svg file that you'll place here will be added to your icon font as ai-iconname
│ ├── ui/ - folders for reusable ui components that are generic app wise such as buttons, titles, boxes etc
│ ├── views/ - entry points to your app - your routes main components should go here
│ ├── app.js - app main file - rendering
│ ├── entry.js - webpack entry point that check if polyfill is needed and calls app.js
│ └── routes.js - app routes
└── dist - your project build files goes here
npm start
- build and start production server on dist folder. port 8080npm run build
- production build of the app to dist foldernpm run dev
- start dev server in-memory with hot-reload enabled. port 4040npm run clean
- clean unnecessary files like README (you can reuse this to clean you dist)npm run profile
- get production bundle profile. saved as stats.json read more
important this profile contains your entire code - take it into account
all of the output files of webpack are hashed including you main js entry point.
the main js bundle and the main css file are appended to src/assets/index.html
automatically
using html-webpack-plugin plugin.
the plugin also supports variables and more advances usage.
adding hash to your files allows you to safely increase caching configuration to days/weeks and even months
without the risk of making a change that will not propagate to users due to browser caching/cdn.
Example:
you can run npm run build
and look in dist/index.html
to see that these both resources were added to your page.
added to head
<link href="/css/app-d9de602fafc32fe1e01a.css" rel="stylesheet"></head>
added to body
<script type="text/javascript" src="/js/app-d9de602fafc32fe1e01a.js"></script></body>
there is a lot of debate on the correct way to write styles.
the offered way in this project is as follows:
- the chosen processor is stylus.
if you are used to scss you can pretty much keep writing styles as you do. - global style resides in
src/styles/app.styl
- component specific styles are in
style.styl
next to the component js code.
there is a feature in css-loader that allows random assignment of classNames using the pseudo selector:local()
. - global reusable classes resides in
src/styles/helpers.styl
and are imported like any other module:
style.styl || .scss || .css
:local(.baseClass) {
&-nested {
color: red;
&:hover {
color: blue;
}
}
}
import {DOM} from 'trixion';
import {baseClass} from './style.styl';
// DEV: baseClass = 'baseClass-KIHGF'
// PRODUCTION: baseClass = 'KIHGF'
export default () => (
DOM.div({className: baseClass},
DOM.div({className: baseClass + '-nested'})
)
);
import {DOM} from 'trixion';
import {responsiveImage} from 'src/styles/helpers.styl';
export default ({imgSrc}) => (
DOM.img({
className: responsiveImage,
src: imgSrc
});
);
to allow working with modules that requires react - an alias has been set in webpack's config
so that calling importing react
or react-dom
or preact
will actually call trixion which
provides the same api for compatibility purposes.
even so... preact is different from react in several features like refs, warnings etc...
to ease importing of your own code, another alias has been added so that src
can be imported directly.
this will prevent relative path mess and will simplify accessing different parts of you modules.
import {Icon} from 'src/ui/icon';
import {loginSelector} from 'src/logic/selectors';
hack - if you want your IDE to recognize the files using this method you can place a symlink of src in node_modules.
this might irritate you npm - but you might want it anyway.
bash command (from project root)
ln -s ../src node_modules/
there is an automated font icon creation that is loaded automatically using webpack fontgen-loader.
every svg you'll place under src/styles/icons
will be added to the font icons set.
simply add the className ai-iconname
to use your icon.
given: src/styles/icons/user.svg -> className: 'ai-user'
const Icon = ({icon}) => DOM.i({className: 'ai-' + icon});