@startupjs/bundler 0.51.0 → 0.52.0

package/lib/mdxExamplesLoader.js

@@ -1,25 +1,28 @@
-const REGEX = /(```jsx +example[\s\S]*?\n)([\s\S]*?)(```)/g
-const PURE_REGEX = /(```jsx +pure-example[\s\S]*?\n)([\s\S]*?)(```)/g
+const REGEX = /(```jsx +(?:example|pure-example)[\s\S]*?\n)([\s\S]*?)(```)/g
 
-const EXAMPLE_FLAGS = [
-  'noscroll'
+const FLAGS = [
+  'example',
+  'noscroll',
+  'pure-example'
 ]
 
+const DEFAULT_MDX_RENDERER = `
+import React from 'react'
+import { observer as __observer } from 'startupjs'
+`
+
 module.exports = function mdxExamplesLoader (source) {
-  const observer = "import { observer as __observer } from 'startupjs'"
-  // NOTE: Two line breaks prevent crashing docs without imports
-  // when the text starts from the first line
-  return observer + '\n\n' + source.replace(REGEX, replacer).replace(PURE_REGEX, pureReplacer)
+  return DEFAULT_MDX_RENDERER + '\n' + source.replace(REGEX, replacer)
 }
 
 function replacer (match, p1, p2, p3) {
   const parts = p1.trim().split(' ')
-  const sectionParts = []
   const p1Parts = []
+  const flags = {}
 
   for (const part of parts) {
-    if (EXAMPLE_FLAGS.includes(part)) {
-      sectionParts.push(part)
+    if (FLAGS.includes(part)) {
+      flags[part] = true
       continue
     }
     p1Parts.push(part)
@@ -27,42 +30,22 @@ function replacer (match, p1, p2, p3) {
 
   p1 = p1Parts.join(' ')
 
-  const code = `\n\n${p1}\n${p2}${p3}`
-
-  p2 = p2.trim().replace(/\n+/g, '\n')
-  if (/^</.test(p2)) p2 = 'return (<React.Fragment>' + p2 + '</React.Fragment>)'
-
-  return (
-    `<section ${sectionParts.join(' ')}>
-      <React.Fragment>
-        {React.createElement(__observer(function Example () {
-          ${p2}
-        }))}
-      </React.Fragment>
-    </section>` + code
-  )
-}
-
-function pureReplacer (match, p1, p2, p3) {
-  const parts = p1.trim().split(' ')
-  const sectionParts = []
-
-  for (const part of parts) {
-    if (EXAMPLE_FLAGS.includes(part)) {
-      sectionParts.push(part)
-    }
-  }
+  const code = flags['pure-example']
+    ? ''
+    : `\n\n${p1}\n[HACK EXAMPLE CODE]${p2}${p3}`
 
   p2 = p2.trim().replace(/\n+/g, '\n')
   if (/^</.test(p2)) p2 = 'return (<React.Fragment>' + p2 + '</React.Fragment>)'
 
   return (
-    `<section ${sectionParts.join(' ')}>
-      <React.Fragment>
-        {React.createElement(__observer(function Example () {
-          ${p2}
-        }))}
-      </React.Fragment>
-    </section>`
+    `{React.createElement(
+        _components.section,
+        ${JSON.stringify(flags)},
+        <React.Fragment>
+          {React.createElement(__observer(function Example () {
+            ${p2}
+          }))}
+        </React.Fragment>
+      )}` + code
   )
 }

package/lib/mdxLoader.js

@@ -1,7 +1,6 @@
 const mdx = require('@mdx-js/mdx')
 
 const DEFAULT_MDX_RENDERER = `
-import React from 'react'
 import { mdx } from '@mdx-js/react'
 `
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs/bundler",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Opinionated scripts and configs to develop a react-native-web project",
   "main": "index.js",
   "publishConfig": {
@@ -16,17 +16,17 @@
   "license": "MIT",
   "dependencies": {
     "@babel/polyfill": "^7.8.0",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/mdx": "^2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "@startupjs/babel-plugin-react-css-modules": "^6.5.4-1",
     "@startupjs/css-to-react-native-transform": "^1.9.0-1",
-    "@startupjs/plugin": "^0.51.0",
+    "@startupjs/plugin": "^0.52.0",
     "@svgr/webpack": "~7.0.0",
     "assets-webpack-plugin": "^7.1.1",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
-    "babel-preset-startupjs": "^0.51.0",
+    "babel-preset-startupjs": "^0.52.0",
     "css-loader": "^6.5.0",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "file-loader": "^6.2.0",
@@ -40,6 +40,7 @@
     "process": "^0.11.10",
     "react-native-svg-transformer": "0.20.0",
     "react-refresh": "^0.10.0",
+    "remark-gfm": "^1.0.0",
     "style-loader": "^3.3.1",
     "stylus": "0.54.7",
     "stylus-loader": "^6.2.0",
@@ -49,5 +50,5 @@
   "peerDependencies": {
     "react-native-svg": ">= 12.1.0"
   },
-  "gitHead": "c5a82f52ce1671b272e216ebd860e93734f561f0"
+  "gitHead": "257155ad428542785e4d3536b77cd624425ef14a"
 }

package/webpack.web.config.js

@@ -18,6 +18,7 @@ const BUILD_PATH = path.join(process.cwd(), BUILD_DIR)
 const BUNDLE_NAME = 'main'
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 const webpack = require('webpack')
+const remarkGfm = require('remark-gfm')
 const DEFAULT_MODE = 'react-native'
 const PLUGINS = getPluginConfigs()
 
@@ -228,7 +229,11 @@ module.exports = function getConfig (env, {
           use: [
             { loader: 'babel-loader' },
             {
-              loader: '@mdx-js/loader'
+              loader: '@mdx-js/loader',
+              options: {
+                providerImportSource: '@startupjs/mdx/client/MDXProvider/index.js',
+                remarkPlugins: [remarkGfm]
+              }
             },
             {
               loader: require.resolve('./lib/mdxExamplesLoader.js')