Inferno - Hello World

+ , + document.getElementById("root")) diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..d2194ff --- /dev/null +++ b/src/main.css @@ -0,0 +1,77 @@ +*, ::after, ::before +{ + box-sizing: border-box; +} + +body +{ + background-color: var(--main-bg-color); + color: var(--main-fg-color); + margin: 0; +} + +nav +{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; +} + +/* START switch */ +input:checked + .slider::before { + transform: translateX(20px); +} + +.switch input { + display: none; +} + +.slider.round +{ + border-radius: 34px; +} + +.slider +{ + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--light-primary-color); + border: 1px solid var(--light-primary-color); +} + +.slider.round::before +{ + border-radius: 50%; +} + +.slider::before +{ + background-color: var(--main-primary-color); + position: absolute; + content: ""; + height: 15px; + width: 15px; + left: 2px; + bottom: 1px; + transition: background-color 1s, transform .4s; +} + +.switch +{ + position: relative; + display: inline-block; + width: 40px; + height: 19px; +} +/* END switch */ + +#ayo_logo +{ + width: 200px; + fill: var(--main-fg-color); +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..827c342 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,60 @@ +`use strict` +import { Component } from 'inferno' +import { connect } from 'inferno-redux'; + +import { changeTheme } from './actions'; +import { Svg } from './svg.jsx' + +import './main.css' +import Logo from '../assets/logo.svg' + +class MainComponent extends Component +{ + componentDidMount() + { + // Smooth color transitions (after rendering to avoid flash on reload) + setTimeout(() => { + const styleEl = document.head.getElementsByTagName('style')[0] + document.head.appendChild(styleEl) + const styleSheet = styleEl.sheet + styleSheet.insertRule( + '*, ::after, ::before { transition-property: background-color, color, fill; transition-duration: 1s;}') + }, + 500) + } + + toggleTheme(event) + { + this.props.changeTheme(event.target.checked ? 'dark' : 'light') + } + + render() + { + return ( +

+ + +

) + } +} + +const mapStateToProps = state => ({ + theme: state.theme +}) + +const mapDispatchToProps = dispatch => ({ + changeTheme: theme => dispatch(changeTheme(theme)) +}) + +export default connect( + mapStateToProps, + mapDispatchToProps +)(MainComponent) \ No newline at end of file diff --git a/src/reducers.js b/src/reducers.js new file mode 100644 index 0000000..393003c --- /dev/null +++ b/src/reducers.js @@ -0,0 +1,11 @@ +import { themeActions } from './actions.js' + +export const themeReducer = (state = 'light', action) => { + switch (action.type) + { + case themeActions.THEME_CHANGE: + return action.theme + default: + return state + } +} \ No newline at end of file diff --git a/src/svg.jsx b/src/svg.jsx new file mode 100644 index 0000000..819ffe1 --- /dev/null +++ b/src/svg.jsx @@ -0,0 +1,35 @@ +`use strict` +import { Component } from 'inferno' + +export class Svg extends Component +{ + constructor(props) + { + super(props) + this.state = { + svg: null, + loading: false + } + } + + componentDidMount() + { + fetch(this.props.url) + .then(res => res.text()) + .then(text => this.setState({ svg: text })) + } + + render() + { + const { loading, svg } = this.state; + if (loading) + { + return + } + else if(!svg) + { + return + } + return + } +} \ No newline at end of file diff --git a/webpack.base.js b/webpack.base.js new file mode 100644 index 0000000..d5e7a5d --- /dev/null +++ b/webpack.base.js @@ -0,0 +1,40 @@ +const path = require('path'); + +module.exports = { + mode: "none", + entry: './src/index.jsx', + module: + { + rules: [ + { + test: /\.jsx$/, + loader: "babel-loader", + options: + { + presets: ["@babel/preset-env"], + plugins: [ + ["babel-plugin-inferno", + { + "imports": true + }] + ] + } + }, + { + test: /src.*\.css$/, + use: ['style-loader', 'css-loader'] + }, + { + test: /assets.*\.(jpg|png|svg|css)$/, + loader: 'file-loader', + options: { + name: '[path][name].[ext]', + }, + }] + }, + output: + { + filename: 'bundle.js', + path: path.resolve(__dirname, 'public') + } +}; diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 0000000..792c921 --- /dev/null +++ b/webpack.dev.js @@ -0,0 +1,61 @@ +const path = require('path'); +const webpack = require('webpack'); +const CompressionPlugin = require("compression-webpack-plugin") +const config = require('./webpack.base.js'); + +module.exports = Object.assign( + config, + { + mode: 'development', + devtool: 'source-map', // compile source map to get better debug output (error file/line) + cache: true, // caching already built files so unchanged files can be reuse when an other changes + watch: true, // watch file change and automatically rebuild the application + watchOptions: + { + ignored: /node_modules/ // avoid watching node_modules as it is usually huge, note that it can be useful when debugging packages + }, + resolve: + { + // avoid warning caused by development mode (using dev inferno build) + alias: + { + inferno: require.resolve('inferno/dist/index.dev.esm.js') + } + }, + plugins: [ + new webpack.DefinePlugin( + { + 'process.env': + { + 'DEBUG': true + } // set a DEBUG flag that can be used in the scripts + }), + new CompressionPlugin( + { + filename: "[path].gz[query]", + algorithm: "gzip", + test: /\.js/ + }) + ], + // webpack-dev-server configuration + devServer: + { + contentBase: path.join(__dirname), + compress: true, + port: 8080, + // Not elegant way to get rid of the gzip path in index.html + proxy: + { + '/$': + { + target: 'http://localhost:8080', + secure: false, + bypass: function(request, response, proxyOptions) + { + return '/index_dev.html'; + } + } + } + } + } +); diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 0000000..ce853fb --- /dev/null +++ b/webpack.prod.js @@ -0,0 +1,29 @@ +const webpack = require('webpack'); +const CompressionPlugin = require("compression-webpack-plugin") +const config = require('./webpack.base.js'); + +module.exports = Object.assign( + config, + { + mode: "production", + optimization: + { + minimize: true + }, + plugins: [ + new webpack.DefinePlugin( + { + 'process.env': + { + 'DEBUG': false + } // set a DEBUG flag that can be used in the scripts (can be skipped) + }), + new CompressionPlugin( + { + filename: "[path].gz[query]", + algorithm: "gzip", + test: /\.js/ + }) + ] + } +);