kilgarenone’s gists

kilgarenone / babelLoaderWebpack.js

Created June 3, 2019 05:18

babel loader webpack

	// this function will reside in the webpack.config.js.
	// It accepts 'browserList' from 'browserList' key in 'package.json'
	// therefore, no need for .babelrc file anymore
	const configureBabelLoader = (browserList = []) => {
	return {
	test: /\.jsx?$/,
	exclude: settings.babelLoaderConfig.exclude,
	use: {
	loader: "babel-loader",
	options: {

kilgarenone / inlineAssetsInWebpack.js

Created May 26, 2019 10:19

inline webpack processed assets in index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	<%= compilation.assets[htmlWebpackPlugin.files.chunks.critical.css[0]].source() %>
	</style>
	</head>
	<body>
	<div id="app"></div>
	</body>

kilgarenone / criticalcss.js

Last active May 10, 2020 01:08

extract css in webpack

	// webpack.config.js

	module.exports = {
	entry: {
	critical: path.resolve(__dirname, "../src/css/index.scss") // this's a chunk, source from a file with my critical CSS I wanna inline!
	},
	plugins: [
	new MiniCssExtractPlugin({
	filename: "[name].css" // it's gonna be 'critical.css'
	}),

kilgarenone / tsconfig.json

Created May 20, 2019 02:49

tsconfig.json for type-checking in separate process

	{
	"compilerOptions": {
	// Target latest version of ECMAScript.
	"target": "esnext",
	// Search under node_modules for non-relative imports.
	"moduleResolution": "node",
	// Process & infer types from .js files.
	"allowJs": true,
	// Don't emit; allow Babel to transform files.
	"noEmit": true,

kilgarenone / webpack.prod.js

Created February 27, 2019 09:13

webpack.prod.js

	const path = require("path");
	const MiniCssExtractPlugin = require("mini-css-extract-plugin");
	const CleanWebpackPlugin = require("clean-webpack-plugin");
	const HtmlWebpackPlugin = require("html-webpack-plugin");

	module.exports = {
	mode: "production", // this trigger webpack out-of-box prod optimizations
	entry: "./index.js",
	output: {
	filename: `[name].[hash].js`, // [hash] is useful for cache busting!

kilgarenone / webpack.dev.js

Last active February 27, 2019 08:39

webpack.dev.js

	const path = require("path");
	const HtmlWebpackPlugin = require("html-webpack-plugin");

	module.exports = {
	mode: "development", // this will trigger some webpack default stuffs for dev
	entry: "./index.js", // if not set, default path to './src/index.js'. Accepts an object with multiple key-value pairs, with key as your custom bundle filename(substituting the [name]), and value as the corresponding file path
	output: {
	filename: "[name].bundle.js", // [name] will take whatever the input filename is. defaults to 'main' if only a single entry value
	path: path.resolve(__dirname, "dist") // the folder containing you final dist/build files. Default to './dist'
	},

kilgarenone / fontello.css

Last active December 9, 2018 06:20

fontello

	@font-face {
	font-family: "fontello";
	src: url("./font/fontello.woff2") format("woff2"),
	url("./font/fontello.woff") format("woff"),
	url("./font/fontello.ttf") format("truetype"),
	url("./font/fontello.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	}

kilgarenone / consumeRenderProps.js

Last active November 25, 2018 04:33

consume render props

	// destructure the object given when called in the <Hello />,
	// then pass those properties to our <CustomComponent /> to be consumed.
	// The 'isSubmitting' value will be toggled and consumed accordingly too!
	<Hello>
	{({
	handleThisClick,
	handleFormSubmit,
	isSubmitting
	}) => (
	<CustomComponent

kilgarenone / exporesAPI.js

Last active November 25, 2018 04:32

render props exposes API

	class Hello extends React.Component {
	state = { isSubmitting: false }

	handleThisClick = () => {
	/* do your thing here */
	}

	handleFormSubmit = async event => {
	event.preventDefault();

kilgarenone / reactRenderProps.js

Last active November 25, 2018 04:17

react render props

	// Function as children pattern
	// Notice below that the body/children of <Hello /> is a anonymous function definition!
	<Hello>
	{ (foo) => (<World foo={foo} />) }
	</Hello>

	/*
	And then we execute the function - this.props.children(),
	while passing it the 'foo' data as an argument to the function above-
	(foo) => (<World foo={foo} />), giving us whatever view is rendered inside the <World />!

kyw kilgarenone