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,7 +15,9 @@ locales.each do |locale|
 end
 
 compile "/js/main/surah-index.tsx" do
-  filter :webpack, depend_on: [
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js],
+         depend_on: [
            "/js/components",
            "/js/lib",
            "/js/hooks",
@@ -27,7 +29,8 @@ compile "/js/main/surah-index.tsx" do
 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,7 +32,9 @@ Ryo.each(name_by_id) do |id, slug|
 end
 
 compile "/js/main/surah-stream.tsx" do
-  filter :webpack, depend_on: [
+  filter :webpack,
+         argv: %W[--config etc/webpack.#{buildenv}.js],
+         depend_on: [
            "/js/components",
            "/js/lib",
            "/js/hooks",
@@ -44,7 +46,8 @@ compile "/js/main/surah-stream.tsx" do
 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-lock.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",
@@ -2638,12 +2637,6 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "license": "MIT"
-    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2780,18 +2773,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3245,6 +3226,16 @@
       "resolved": "packages/typescript/postman",
       "link": true
     },
+    "node_modules/preact": {
+      "version": "10.23.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz",
+      "integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3345,31 +3336,6 @@
         "safe-buffer": "^5.1.0"
       }
     },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3572,15 +3538,6 @@
         }
       }
     },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",

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";

src/js/components/Timer/index.tsx

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

src/js/hooks/useTheme.ts

@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 export type Theme = "blue" | "green";
 type Result = [Theme, (t: Theme) => void];
 const THEMES: Theme[] = ["blue", "green"];

src/js/main/surah-index.tsx

@@ -1,6 +1,4 @@
 import { Surah, TSurah, Quran } from "Quran";
-import React from "react";
-import ReactDOM from "react-dom/client";
 import { T } from "~/lib/t";
 import { SurahIndex } from "~/components/SurahIndex";
 
@@ -16,7 +14,8 @@ import { SurahIndex } from "~/components/SurahIndex";
     (e: TSurah) => new Surah(e),
   );
 
-  ReactDOM.createRoot(root).render(
+  render(
     <SurahIndex locale={locale} surahs={surahs} t={t} />,
+    root
   );
 })();

src/js/main/surah-stream.tsx

@@ -1,6 +1,4 @@
 import { Quran, Surah, Ayah, TSurah } from "Quran";
-import React from "react";
-import ReactDOM from "react-dom/client";
 import { T } from "~/lib/t";
 import { SurahStream } from "~/components/SurahStream";
 
@@ -32,7 +30,8 @@ import { SurahStream } from "~/components/SurahStream";
     ayah.ms = ms * 1000;
   }
 
-  ReactDOM.createRoot(root).render(
+  render(
     <SurahStream surah={surah} locale={locale} t={t} />,
+    root
   );
 })();

src/js/main/vendor.ts

@@ -0,0 +1,15 @@
+import { render } from "preact";
+import { useState, useEffect, useMemo, useRef } from "preact/hooks";
+import * as React from "preact/compat";
+import classNames from "classnames";
+
+const exports = {
+  React,
+  render,
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  classNames,
+};
+Object.assign(window, exports);