Replace React with preact

Rules

@@ -25,12 +25,10 @@ surahs     = Ryo.from_json(path: File.join(dirs.content, "json", "surahs.json"))
 tidy       = `which tidy || which tidy5`.chomp
 buildenv   = ENV["buildenv"] || "development"
 etcdir     = File.join(__dir__, "etc")
+globals = {buildenv:, locales:, tidy:, tdata:, surahs:, name_by_id:}
 
 ##
 # Filters
-Nanoc::Webpack
-  .default_argv
-  .replace([*Nanoc::Webpack.default_argv, "--config", File.join(etcdir, "webpack.#{buildenv}.js")].uniq)
 Nanoc::Tidy
   .default_argv
   .replace([*Nanoc::Tidy.default_argv, "-upper"].uniq)
@@ -55,19 +53,21 @@ compile "/robots.txt" do
   write("/robots.txt")
 end
 
-##
-# /json/durations/*.json
-passthrough "/json/durations/*.json"
-
 ##
 # Rules
-require_rules "nanoc/rules/assets"
-require_rules "nanoc/rules/redirect", {locales:, tidy:}
-require_rules "nanoc/rules/random", {locales:, tdata:, tidy:}
-require_rules "nanoc/rules/surah-stream", {locales:, tdata:, surahs:, name_by_id:, tidy:}
-require_rules "nanoc/rules/surah-index", {locales:, tdata:, tidy:}
+passthrough "/json/durations/*.json"
+require_rules "nanoc/rules/assets", globals
+require_rules "nanoc/rules/redirect", globals
+require_rules "nanoc/rules/random", globals
+require_rules "nanoc/rules/surah-stream", globals
+require_rules "nanoc/rules/surah-index", globals
 
-##
-# Catch-all
+compile "/js/main/vendor.ts" do
+  filter :webpack,
+         argv: %w[--config etc/webpack.vendor.js]
+  write("/js/main/vendor.js")
+  filter :gzip
+  write("/js/main/vendor.js.gz")
+end
 compile("/**/*") { write(nil) }
 layout("**/*", :erb)

etc/webpack.vendor.js

@@ -0,0 +1,14 @@
+const path = require('path');
+const common = require('./webpack.common.js');
+const { merge } = require('webpack-merge');
+
+module.exports = (env, argv) => {
+  return merge(
+    common,
+    {
+      output: { library: { type: 'umd' } },
+      resolve: { extensions: ['.ts', '.tsx'] },
+      optimization: { minimize: true }
+    }
+  )
+}

nanoc/rules/random.rules

@@ -15,7 +15,9 @@ locales.each do |locale|
 end
 
 compile "/js/main/random.ts" do
-  filter(:webpack, depend_on: ["/js/lib/"])
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js],
+         depend_on: ["/js/lib/"]
   write("/js/main/random.js")
   filter(:gzip)
   write("/js/main/random.js.gz")

nanoc/rules/redirect.rules

@@ -12,7 +12,9 @@ compile "/html/main/redirect.html.erb" do
 end
 
 compile "/js/main/redirect.ts" do
-  filter(:webpack, depend_on: ["/js/lib/"])
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js],
+         depend_on: ["/js/lib/"]
   write("/js/main/redirect.js")
   filter(:gzip)
   write("/js/main/redirect.js.gz")

nanoc/rules/surah-index.rules

@@ -15,19 +15,22 @@ locales.each do |locale|
 end
 
 compile "/js/main/surah-index.tsx" do
-  filter :webpack, depend_on: [
-    "/js/components",
-    "/js/lib",
-    "/js/hooks",
-    "/css"
-  ]
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js],
+         depend_on: [
+           "/js/components",
+           "/js/lib",
+           "/js/hooks",
+           "/css"
+         ]
   write "/js/main/surah-index.js"
   filter :gzip
   write "/js/main/surah-index.js.gz"
 end
 
 compile "/js/loaders/SurahIndexLoader.ts" do
-  filter :webpack
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js]
   write "/js/loaders/surah-index-loader.js"
   filter :gzip
   write "/js/loaders/surah-index-loader.js.gz"

nanoc/rules/surah-stream.rules

@@ -32,19 +32,22 @@ Ryo.each(name_by_id) do |id, slug|
 end
 
 compile "/js/main/surah-stream.tsx" do
-  filter :webpack, depend_on: [
-    "/js/components",
-    "/js/lib",
-    "/js/hooks",
-    "/css"
-  ]
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js],
+         depend_on: [
+           "/js/components",
+           "/js/lib",
+           "/js/hooks",
+           "/css"
+         ]
   write "/js/main/surah-stream.js"
   filter :gzip
   write "/js/main/surah-stream.js.gz"
 end
 
 compile "/js/loaders/SurahStreamLoader.ts" do
-  filter :webpack
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js]
   write "/js/loaders/surah-stream-loader.js"
   filter :gzip
   write "/js/loaders/surah-stream-loader.js.gz"

package.json

@@ -10,8 +10,7 @@
   },
   "dependencies": {
     "classnames": "^2.3",
-    "react": "^18.2",
-    "react-dom": "^18.2"
+    "preact": "^10.23.2"
   },
   "devDependencies": {
     "@types/css-font-loading-module": "^0.0.13",

rake/tasks/nanoc.rake

@@ -5,7 +5,7 @@ namespace :nanoc do
   task :clean do
     Dir.chdir(dirs.root) do
       sh "rm -rf node_modules/.cache/"
-      sh "rm -rf build/"
+      sh "rm -rf #{nanoc.output_dir}/*"
       sh "rm -rf tmp/"
     end
   end

share/al-quran.reflectslight.io/CHANGELOG

@@ -2,13 +2,24 @@
 
 ** vNEXT
 
+**** Add ~src/js/main/vendor.ts~
+The new vendor entry point bundles preact, and other
+third party dependencies in a single file. This change
+is an improvement imported from the ~kaios/main~ branch
+
+**** Replace React with preact
+The preact library is a lightweight alternative to React,
+with a smaller footprint. This change is an improvement
+imported from the ~kaios/main~ branch
+
 **** Change default ~audio.base_url~
 This change sets the default audio URL to
-https://audio1.al-quran.reflectslight.io/rifai
+https://audio.al-quran.reflectslight.io/rifai
 
 **** Improve KaiOS support
 This change optimizes the layout for KaiOS devices through
-specialized media queries
+specialized media queries. A new branch (~kaios/main~) will
+focus on KaiOS support
 
 **** Add ~etc/~
 This change moves a large portion of the website's configuration

src/html/main/random.html.erb

@@ -18,6 +18,7 @@
     <%= erb("_favicon.html.erb") %>
   </head>
   <body>
+    <script src="/js/main/vendor.js?v=<%= commit %>"></script>
     <script src="/js/main/random.js?v=<%= commit %>"></script>
   </body>
 </html>

src/html/main/redirect.html.erb

@@ -15,6 +15,7 @@
     <%= erb("_favicon.html.erb") %>
   </head>
   <body>
+    <script src="/js/main/vendor.js?v=<%= commit %>"></script>
     <script src="/js/main/redirect.js?v=<%= commit %>"></script>
   </body>
 </html>

src/html/main/surah-index.html.erb

@@ -22,6 +22,7 @@
   <body>
     <%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %>
     <div class="root h-full"></div>
+    <script src="/js/main/vendor.js?v=<%= commit %>"></script>
     <script src="/js/loaders/surah-index-loader.js?v=<%= commit %>"></script>
   </body>
 </html>

src/html/main/surah-stream.html.erb

@@ -25,6 +25,7 @@
          data-surah-id="<%= context.surah.id %>"
          data-audio-base-url="<%= audio_base_url %>">
     </div>
+    <script src="/js/main/vendor.js?v=<%= commit %>"></script>
     <script src="/js/loaders/surah-stream-loader.js?v=<%= commit %>"></script>
   </body>
 </html>

src/js/components/AudioControl.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from "react";
 import type { Surah, Ayah } from "Quran";
 import { SoundOnIcon, SoundOffIcon } from "~/components/Icon";
 

src/js/components/Head.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { ReactNode } from "react";
 import { LanguageSelect, ThemeSelect } from "~/components/Select";
 import type { TLocale } from "Quran";

src/js/components/Icon.tsx

@@ -1,6 +1,3 @@
-import React from "react";
-import classNames from "classnames";
-
 type Props = {
   onClick: () => void;
 };

src/js/components/Select/LanguageSelect.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Quran, TLocale } from "Quran";
 import { Select } from "~/components/Select";
 import classNames from "classnames";

src/js/components/Select/Option.tsx

@@ -1,5 +1,3 @@
-import React, { ReactNode, AnchorHTMLAttributes } from "react";
-
 type Rest = AnchorHTMLAttributes<HTMLAnchorElement>;
 type Props = {
   value: string;

src/js/components/Select/ThemeSelect.tsx

@@ -1,7 +1,5 @@
-import React from "react";
 import { Select } from "~/components/Select";
 import type { Theme } from "~/hooks/useTheme";
-import classNames from "classnames";
 
 type Props = {
   theme: string;

src/js/components/Select/index.tsx

@@ -1,5 +1,3 @@
-import React, { useState, useEffect } from "react";
-import classNames from "classnames";
 import { Option } from "./Option";
 import { ThemeSelect } from "./ThemeSelect";
 import { LanguageSelect } from "./LanguageSelect";

src/js/components/SurahIndex/Filter.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { TFunction, formatNumber } from "~/lib/t";
 import type { Surah, TLocale } from "Quran";
 

src/js/components/SurahIndex/index.tsx

@@ -1,11 +1,9 @@
-import React, { useRef, useState, useEffect } from "react";
 import type { Surah, TLocale } from "Quran";
 import { useTheme } from "~/hooks/useTheme";
 import { formatNumber, TFunction } from "~/lib/t";
 import { Arrow } from "~/components/Icon";
 import { Head } from "~/components/Head";
 import { Filter } from "./Filter";
-import classNames from "classnames";
 import "@css/main/SurahIndex.scss";
 
 type Props = {

src/js/components/SurahStream/Stream.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useMemo, useRef } from "react";
 import type { Surah, Ayah, TAyat, TLocale } from "Quran";
 import { AudioControl } from "~/components/AudioControl";
 import { formatNumber, TFunction } from "~/lib/t";

src/js/components/SurahStream/index.tsx

@@ -1,5 +1,3 @@
-import React, { useState, useEffect, useMemo, useRef } from "react";
-import classNames from "classnames";
 import type { Surah, Ayah, TAyat, TLocale } from "Quran";
 import { useTheme } from "~/hooks/useTheme";
 import { AudioControl, TAudioStatus } from "~/components/AudioControl";