Improve Component Integration With Content

This commit ensures that Storybook, Jest and a preact project render the
components/contents correctly.

Previously a variety of mistakes were made that now are rectified:
* Jest does not honour .babelrc, so we gave up on JSX and pragma
niceties
* Previous tests were not actually rendering the component from the
bundle
* package.json specified an incorrect bundle entry
* dist/ folder was made part of version control
* Hidayah implementation was leveraging react-markdown to render the
contents. While this works for storybook, bundling this code implied
that react-markdown tries to mutate the content that Rollup marks as
immutable: rollup/rollup#1771

In addition to the above:
* Abstract out the implementation of markdown_plugin so Rollup and Vite
can reuse.

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 npm-debug.log
 storybook-static/
+.DS_Store
+dist/

.storybook/main.js

@@ -1,7 +1,8 @@
 /** @type { import('@storybook/preact-vite').StorybookConfig } */
-import fs from 'fs/promises';
+import fsPromise from 'fs/promises';
 import { StorybookConfig } from '@storybook/preact-vite';
 import path from 'path'
+import markdown from '../plugins/markdown_plugin'
 
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -35,22 +36,23 @@ const config = {
             setup(build) {
               build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
                 loader: 'jsx',
-                contents: await fs.readFile(args.path, 'utf8'),
+                contents: await fsPromise.readFile(args.path, 'utf8'),
               }));
             },
           },
         ],
       };
     };
 
+  config.plugins.push(markdown());
   return {
     ...config,
     resolve: {
 
       alias: [
-        { find: '@hanafi', replacement: path.resolve(__dirname, 'contents/hanafi/') },
-        { find: '@components', replacement: path.resolve(__dirname, 'src/components/') },
-        { find: '@utils', replacement: path.resolve(__dirname, 'src/utils/') },
+        { find: '@hanafi', replacement: path.resolve(__dirname, '../contents/hanafi/') },
+        { find: '@components', replacement: path.resolve(__dirname, '../src/components/') },
+        { find: '@utils', replacement: path.resolve(__dirname, '../src/utils/') },
         { find: '@al-mabsut/muslimah', replacement: path.resolve(__dirname, '../node_modules/@al-mabsut/muslimah/dist/esm/bundle.js') }
       ]
     },

jest.config.common.js

@@ -98,7 +98,7 @@ const commonConfig = {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  preset: 'jest-preset-preact'
+  preset: 'jest-preset-preact',
 
   // Run tests from one or more projects
   // projects: null,
@@ -178,21 +178,21 @@ const commonConfig = {
 
   // A map from regular expressions to paths to transformers
   // transform: null,
-  // transform: {
-  //   '^.+\\.js?$': 'babel-jest',
-  //   '\\.(jpg|jpeg|png|svg|webp|)$': './fileMock.js',
-  // },
+  transform: {
+    // '^.+\\.js?$': 'babel-jest'
+    // '\\.(jpg|jpeg|png|svg|webp|)$': './fileMock.js'
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip
   // transformation
   // transformIgnorePatterns: [
   //   "/node_modules/"
   // ],
 
-  // transformIgnorePatterns: [
-  //   // This is needed to solve: SyntaxError: Unexpected token 'export'
-  //   "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
-  // ],
+  transformIgnorePatterns: [
+    // This is needed to solve: SyntaxError: Unexpected token 'export'
+    'node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)'
+  ]
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically
   // return a mock for them

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@al-mabsut/muslimah",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Shari' ahkaam related to muslim women matters",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/cjs/bundle.js",
+  "module": "dist/esm/bundle.js",
   "files": [
     "dist/cjs",
     "dist/esm"
@@ -14,6 +14,7 @@
     "lint": "eslint .",
     "test-cjs": "jest --config jest.config.cjs.js",
     "test-esm": "jest --config jest.config.esm.js",
+    "test": "npm run test-cjs && npm run test-esm",
     "check-node-version": "check-node-version --print --node $(cat .tool-versions | grep 'nodejs ' | cut -d' ' -f2)",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -35,6 +36,7 @@
   },
   "homepage": "https://github.com/al-mabsut/muslimah#readme",
   "dependencies": {
+    "marked": "^11.1.1",
     "preact": "^10.19.3",
     "react-markdown": "^9.0.1"
   },
@@ -55,7 +57,9 @@
     "@storybook/preact": "^7.6.6",
     "@storybook/preact-vite": "^7.6.6",
     "@storybook/test": "^7.6.6",
+    "@testing-library/preact": "^3.2.3",
     "babel-jest": "^29.7.0",
+    "babel-plugin-jsx-pragmatic": "^1.0.2",
     "eslint": "^8.56.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-compat": "^4.2.0",

plugins/markdown_plugin.js

@@ -0,0 +1,24 @@
+import path from 'path';
+import fs from 'fs';
+import { h } from 'preact';
+// import renderToString from 'preact-render-to-string';
+import { marked } from 'marked';
+
+const markdownPlugin = () => ({
+  name: 'our-custom-markdown-plugin',
+  load(id) {
+    if (id.endsWith('.md')) {
+      const filePath = path.resolve(id);
+      const markdown = fs.readFileSync(filePath, 'utf-8');
+
+      // Convert Markdown to HTML
+      const renderedMarkdown = marked(markdown);
+
+      // Export the transformed content
+      return `export default ${JSON.stringify(renderedMarkdown)};`;
+    }
+    return null;
+  }
+});
+
+export default markdownPlugin;

rollup.config.mjs

@@ -3,36 +3,14 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import alias from '@rollup/plugin-alias';
 import path from 'path';
-import fs from 'fs';
 import { fileURLToPath } from 'url';
+import markdown from './plugins/markdown_plugin.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 import postcss from 'rollup-plugin-postcss';
 
-const markdownContentPlugin = () => ({
-  name: 'markdown-content-plugin',
-  renderChunk(code) {
-    const contentStore = {};
-    const directoryPath = path.join(__dirname, 'contents/hanafi/en');
-
-    const files = fs.readdirSync(directoryPath);
-    files.forEach(file => {
-      if (file.endsWith('.md')) {
-        const filePath = path.join(directoryPath, file);
-        contentStore[file] = fs.readFileSync(filePath, 'utf8');
-      }
-    });
-
-    const modifiedCode = code + `\n export const contentStore = ${JSON.stringify(contentStore)};\n`;
-
-    // Return modified code and null for sourcemap
-    return { code: modifiedCode, map: null };
-  }
-});
-
-
 export default {
   input: 'src/index.js', // Main JavaScript file
   external: ['preact'], // Don’t bundle Preact
@@ -44,7 +22,7 @@ export default {
         { find: '@utils', replacement: path.resolve(__dirname, 'src/utils/') }
       ]
     }),
-    markdownContentPlugin(),
+    markdown(),
     postcss({
       extensions: ['.css'],
       modules: true