[draft] React callbacks

.vscode/launch.json

@@ -4,6 +4,32 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Launch via NPM parseFull",
+            "request": "launch",
+            "runtimeArgs": [
+                "run-script",
+                "dev:parseFull"
+            ],
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
+        {
+            "name": "Launch via NPM parseReactFull",
+            "request": "launch",
+            "runtimeArgs": [
+                "run-script",
+                "dev:parseReactFull"
+            ],
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
         {
             "type": "node",
             "request": "launch",

README.md

@@ -8,9 +8,26 @@ Maintainer notes:
 - **Replacer for React DOM right now is broken. I'm moving it out into https://github.com/LLazyEmail/react-plain-template-example**
 - **React version isn't working now. Probably we'll skip few releases and make it work as it should be.**
 
+# How to run this module
+
+There are two modes development and production. 
+In development mode all changes that was made automatically rebuilds and creates a file html or js.  Development mode has two variants: 
+
+`npm run dev:parseFull` - runs parsing from Markdown to html.
+
+`npm run dev:parseReactFull` - runs parsing from Markdown to React DOM tree.
+
+In production mode builds an optimized module. Production mode has two options:
+
+`npm run prod:parseFull` and `prod:parseReactFull`.
+
+# Debugging the module
+
+In VS Code needs to open a tab "Run and Debug", then in select input choose `Launch via NPM parseFull` - for html and `Launch via NPM parseReactFull`, the process will start automatically (builds and create a file). Put a breakpoint in line you need then save a file.
+
 # Markdown to email template generator
 
-This simple and light tool generates email template from markdown. The command is `npm run parse`. 
+This simple and light tool generates email template from markdown. The command is `npm run dev:parseFull`. 
 The path to markdown file must be `./source/source.md`, and output directory is `generated/newEmail.html`.
 
 We tried to create our own wheel, then we failed. Arthur get bored trying to fix it and make it work properly.

package.json

@@ -4,19 +4,14 @@
   "description": "Translate 'Markdown' Syntax into HTML For Email Newsletters",
   "main": "index.js",
   "scripts": {
-    "build": "rollup -c",
-    "parse": "npm run build && cross-env PARSE=full node ./dist/bundle",
-    "parseNoAdv": "npm run build && cross-env PARSE=noAdv node ./dist/bundle",
-    "parse:full": "npm run build && cross-env PARSE=full node ./dist/bundle",
-    "parseReact": "npm run build && cross-env PARSE=reactContentOnly node ./dist/bundle",
-    "parseReact:full": "npm run build && cross-env PARSE=reactFull node ./dist/bundle",
-    "parsed": "cross-env PARSE=full node ./src/index",
-    "emptyT": "npm run build && cross-env PARSE=plainEmpty node ./dist/bundle",
-    "defaultT": "npm run build && cross-env PARSE=plainTemplate node ./dist/bundle",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "dev:parseFull": "cross-env PARSE=full rollup -c -w",
+    "dev:parseReactFull": "cross-env PARSE=reactFull rollup -c -w",
+    "prod:parseFull": "npm run build && cross-env PARSE=full node ./dist/bundle",
+    "prod:parseReactFull": "npm run build && cross-env PARSE=reactFull node ./dist/bundle",
     "test:react": "npm run checkFolders && jest ./src/parserMDReact/tests",
     "lint:fix": "eslint -c ./.eslintrc.js ./src --fix --ignore-pattern \"./package.json\" ",
     "lint": "eslint -c  ./.eslintrc.js ./src --quiet --ignore-pattern  \"./package.json\" ",
-    "build:small": "npm run checkFolders && node ./src/index.js",
     "checkFolders": "node ./checkFolders",
     "test": "npm run checkFolders && jest ./src/tests",
     "test:typography": "jest --all --testPathPattern=./src/tests/typography",
@@ -34,8 +29,9 @@
     "@babel/eslint-parser": "7.18.9",
     "@babel/preset-env": "7.18.9",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "22.0.0",
+    "@rollup/plugin-commonjs": "22.0.1",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "@rollup/plugin-run": "2.1.0",
     "babel-preset-react-app": "^10.0.1",
     "eslint": "8.20.0",
     "eslint-config-airbnb-base": "15.0.0",
@@ -50,6 +46,7 @@
     "prettier": "2.7.0",
     "rollup": "2.75.6",
     "rollup-plugin-node-polyfills": "0.2.1",
+    "source-map-support": "0.5.21",
     "winston": "^3.8.0"
   },
   "dependencies": {

rollup.config.js

@@ -3,12 +3,16 @@ import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import nodePolyfills from 'rollup-plugin-node-polyfills';
+import run from '@rollup/plugin-run';
+
+const dev = process.env.NODE_ENV !== 'production';
 
 export default {
   input: 'src/index.js',
   output: {
     file: 'dist/bundle.js',
     format: 'cjs',
+    sourcemap: true,
   },
   plugins: [
     resolve({
@@ -25,5 +29,9 @@ export default {
       babelHelpers: 'bundled',
     }),
     nodePolyfills(),
+    dev &&
+      run({
+        execArgv: ['-r', 'source-map-support/register'],
+      }),
   ],
 };

src/callbacksReact/index.js

@@ -1,5 +1,8 @@
-import Callbacks from './methods/all';
+import * as simple from './methods/simple';
+import * as callbacks from './methods/callbacks';
+import * as lists from './methods/lists';
+import _header from './methods/header';
 
-import { newLine } from './helpers';
+const Callbacks = { ...simple, ...lists, _header, ...callbacks };
 
-export { Callbacks, newLine };
+export { Callbacks };

src/callbacksReact/methods/callbacks.js

@@ -1,13 +1,10 @@
-// HELPER FROM MAIN CALLBACKS
-// TODO undisable because there is a lot of errors
-/* eslint-disable */
-import { 
-  // replaceReactWrapper, 
-  newLine } from '../helpers';
+import { newLine } from '../../domain/helper-methods';
+
+import { commonReplaceReact } from '../../domain/replace-wrapper3.0';
 
 /// function is not working as planned
 
-export function _paragraph(text, line) {
+function _paragraph(text, line) {
   const trimmed = line.trim();
 
   if (/^<\/?(ul|ol|li|h|p|bl)/i.test(trimmed)) {
@@ -22,57 +19,43 @@ export function _paragraph(text, line) {
   const config = {
     params,
     name: 'paragraph',
-    debug: true,
+    // debug: true,
   };
 
-  // try {
-  //   const replaced = commonReplace(config);
-
-  //   return replaced;
-  // } catch (error) {
-  //   catchErrorTraceOutput(error);
-  // }
-
-  // const result = newLine + replaceReactWrapper('paragraph', config) + newLine;
   // console.log(config);
+  const replaced = commonReplaceReact(config);
+  const result = newLine + replaced + newLine;
 
   return result;
 }
 /// !end function is not working as planned
 
-export function _image(text, alt, srcWithTooltip) {
-  // const src = srcWithTooltip.trim().replace(/\"image_tooltip\"/, '');
-
-  // const params = {
-  //   src: src.trim(),
-  //   altText: alt,
-  // };
+function _image(text, alt, srcWithTooltip) {
+  const src = srcWithTooltip.trim().replace(/\"image_tooltip\"/, '');
 
-  // const config = {
-  //   params,
-  //   name: 'image',
-  //   debug: true,
-  // };
+  const params = {
+    src: src.trim(),
+    altText: alt,
+  };
 
-  this.warnings.images++;
+  const config = {
+    params,
+    name: 'image',
+    debug: true,
+  };
 
-  // try {
-  //   const replaced = commonReplace(config);
+  this.warnings.images += 1;
 
-  //   return replaced;
-  // } catch (error) {
-  //   catchErrorTraceOutput(error);
-  // }
+  const replaced = commonReplaceReact(config);
 
-  // const result = replaceReactWrapper('image', config);
-  return result;
+  return replaced;
 }
 
-export function _br(text, newLines) {
+function _br(text, newLines) {
   const arrNewLines = newLines.match(new RegExp(newLine, 'g'));
 
-  // @TODO well, it's not good. can be improved with lodash
-  // @TODO I REALLY HATE THIS LINE
+  // TODO well, it's not good. can be improved with lodash
+  // I REALLY HATE THIS LINE
   const result = arrNewLines.reduce(
     (acc, current, index) => (index > 0 ? `${acc}<br/>${current}` : current),
     '',
@@ -81,38 +64,35 @@ export function _br(text, newLines) {
   return result;
 }
 
-export function _sponsorship(text) {
+function _sponsorship(text) {
+  // TODO move out this regex into constants file.
   const regex = /\[(.*?)\]/g;
+
+  const regex2 = /[\[\]]/g;
+
   const [content, href, src] = text
     .match(regex)
-    .map((match) => match.replace(/[\[\]]/g, ''));
-
-  // const params = {
-  //   src: src.trim(),
-  //   href: href.trim(),
-  //   content: content.trim(),
-  // };
-
-  // const config = {
-  //   params,
-  //   name: 'sponsor',
-  //   debug: true,
-  // };
-
-  // try {
-  //   const replaced = commonReplace(config);
-
-  //   return replaced;
-  // } catch (error) {
-  //   catchErrorTraceOutput(error);
-  // }
-
-  // @TODO nope, not good
-  this.errors.sponsorshipTop
-    ? (this.errors.sponsorshipBottom = true)
-    : (this.errors.sponsorshipTop = true);
-
-  // return replaceReactWrapper('sponsor', config, 'body');
+    .map((match) => match.replace(regex2, ''));
+
+  const params = {
+    src: src.trim(),
+    href: href.trim(),
+    content: content.trim(),
+  };
+
+  const config = {
+    params,
+    name: 'sponsor',
+    debug: true,
+  };
+  const replaced = commonReplaceReact(config);
+  return replaced;
+
+  // TODO upgrade a way to handle errors in state object
+  // eslint-disable-next-line no-unused-expressions
+  // this.errors.sponsorshipTop
+  //   ? (this.errors.sponsorshipBottom = true)
+  //   : (this.errors.sponsorshipTop = true);
 }
 
-// export { _paragraph, _image, _sponsorship, _br, newLine };
+export { _paragraph, _image, _sponsorship, _br };