migrate loader to js

Author: xiaoxinghu

packages/loader/index.cjs

@@ -1,4 +1,4 @@
-// stolen code from @jdx-js/loader
+// stolen code from @mdx-js/loader
 
 /**
  * Webpack loader
@@ -11,7 +11,7 @@
 module.exports = function (code) {
   const callback = this.async()
   // Note that `import()` caches, so this should be fast enough.
-  import('./dist/loader.js').then((module) =>
+  import('./lib/index.js').then((module) =>
     module.loader.call(this, code, callback)
   )
 }

packages/loader/index.d.ts

@@ -0,0 +1,18 @@
+import type { ProcessorOptions } from '@orgajs/orgx'
+import type { LoaderContext } from 'webpack'
+
+/**
+ * A Webpack loader to compile MDX to JavaScript.
+ *
+ * [Reference for Loader API](https://webpack.js.org/api/loaders/)
+ *
+ * @this {LoaderContext<unknown>}
+ * @param {string} value
+ *   The original module source code.
+ * @returns {void}
+ */
+declare function orgLoader(this: LoaderContext<unknown>, value: string): void
+
+export default orgLoader
+
+export type Options = ProcessorOptions

packages/loader/package.json

@@ -3,13 +3,13 @@
   "version": "3.1.10",
   "description": "Load org-mode content through orga.",
   "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./index.cjs"
-    }
-  },
-  "types": "./dist/index.d.ts",
+  "main": "./index.cjs",
+  "types": "index.d.ts",
+  "files": [
+    "lib/",
+    "index.cjs",
+    "index.d.ts"
+  ],
   "author": "Xiaoxing Hu <[email protected]>",
   "license": "MIT",
   "homepage": "https://github.com/orgapp/orgajs/tree/main/packages/loader#readme",
@@ -18,31 +18,22 @@
     "url": "https://github.com/orgapp/orgajs.git",
     "directory": "packages/loader"
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "build": "pnpm clean && pnpm compile",
-    "test": "node --test --no-warnings --loader tsx tests/*.test.ts",
-    "clean": "del ./dist tsconfig.tsbuildinfo",
-    "compile": "tsc -b"
+    "test": "node --test tests/*.test.js"
   },
   "dependencies": {
     "@orgajs/orgx": "workspace:^",
-    "loader-utils": "^3.2.1",
     "vfile-reporter": "^7.0.5"
   },
   "devDependencies": {
     "@orgajs/react": "workspace:^",
-    "@types/loader-utils": "^2.0.3",
-    "@types/node": "^20.1.5",
+    "@types/node": "^20.2.1",
     "babel-loader": "^9.1.2",
     "del-cli": "^5.0.0",
     "html-loader": "^4.2.0",
     "memfs": "^3.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsx": "^3.12.7",
-    "webpack": "^5.82.1"
+    "webpack": "^5.83.1"
   }
 }

packages/loader/src/index.ts

@@ -4,7 +4,7 @@ import { promises as fs } from 'fs'
 import webpack from 'webpack'
 import { fileURLToPath } from 'url'
 
-export async function compile(fixture: string, options = {}) {
+export async function compile(fixture, options = {}) {
   const base = new URL('.', import.meta.url)
 
   const result = await promisify(webpack)({

packages/loader/src/loader.ts

@@ -0,0 +1,47 @@
+import test from 'node:test'
+import * as assert from 'node:assert'
+import { compile } from './compiler.js'
+
+test('basic org-mode parsing', async () => {
+  const stats = await compile('fixture.org', {
+    name: 'Alice',
+  })
+
+  // wait for 3 seconds
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+  console.log('after the wait')
+
+  const output = stats.toJson({ source: true }).modules[0].source
+  assert.equal(
+    output.trim(),
+    `
+/*@jsxRuntime automatic @jsxImportSource react*/
+import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+export const title = 'hello world';
+function _createOrgaContent(props) {
+  const _components = Object.assign({
+    div: "div",
+    h1: "h1"
+  }, props.components);
+  return _jsxs(_components.div, {
+    className: "section",
+    children: [_jsxs(_components.h1, {
+      children: ["headline one", " "]
+    }), _jsx(_components.div, {
+      style: {
+        color: 'red'
+      },
+      children: "in a box"
+    })]
+  });
+}
+function OrgaContent(props = {}) {
+  const {wrapper: OrgaLayout} = props.components || ({});
+  return OrgaLayout ? _jsx(OrgaLayout, Object.assign({}, props, {
+    children: _jsx(_createOrgaContent, props)
+  })) : _createOrgaContent(props);
+}
+export default OrgaContent;
+`.trim()
+  )
+})