kilgarenone

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const cssnano = require("cssnano");

module.exports = {
  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {

kilgarenone

module.exports = {
  module: {
    rules: [{
      test: /\.(png|jpe?g)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: `img/[name].[hash].[ext]`
          }

kilgarenone

module.exports = {
  module: {
    rules: [{
        test: /\.svg$/,
        use: [
          // encode < 4KB  bytes svg to utf-8 data-uri for smaller size.
          // Fallback to file-loader for > 4KB  files.
          {
            loader: "svg-url-loader",
            options: {

kilgarenone

import { h, Component } from "preact";

import AsyncComponent from "./components/AsyncComponent/AsyncComponent";

class TermsOfUse extends Component {
  constructor(props) {
    super(props);
  }

  render() {

kilgarenone

import { h } from "preact";

export default function TermsOfUseContent() {
  return (
    <div>
      <div>
        <p>When a product is free, YOU are the product hehe :)</p>
        <ol>
          <li> ...
  );

kilgarenone

import { h, Component } from "preact";

class LazyLoadingImage extends Component {
  state = { lazyLoaded: false, source: "" };

  componentDidUpdate() {
    // the key here is the `inVisible` prop of which value is passed from the `Observer` component!
    if (!this.state.lazyLoaded && this.props.isVisible) {
      this.getBgImage();
    }

kilgarenone

import { h, Component } from "preact";

class Observer extends Component {
  constructor(props) {
    super(props);
    this.state = { isVisible: false };
    this.io = null;
    this.container = null;
  }

kilgarenone

import { h, Component } from "preact";
import { Router } from "preact-router";

// import Payment from "../routes/Payment/Payment"; // now we don't do this no more! Skipping its entire JS from our main bundle! yay!
import PaymentLoader from "../routes/Payment/Payment.loader";

class App extends Component {
  render(props) {
    return (
      <Router>

kilgarenone

import { h, Component } from "preact";

import AsyncComponent from "./AsyncComponent/AsyncComponent";
import { setupNavbar } from "./Navbar/Navbar";

// we gonna import this 'PaymentLoader' instead of the real 'Payment' component later when we lay out our routes later. You will see.
class PaymentLoader extends Component {
  constructor(props) {
    super(props);
    

kilgarenone

import { h, Component } from "preact";
import Loading from "../Loading/Loading"; // your own spinner cmp here obviously

class AsyncComponent extends Component {
  state = {
    Cmp: null,
    pastDelay: false
  };

  componentDidMount() {