Chore: Allow chunkify to accept other extensions than js, jsx and html (

#1140)
styleguidist · Sep 18, 2018 · d4be4f5 · d4be4f5
1 parent 0e6e95a
commit d4be4f5
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 3 deletions.
diff --git a/loaders/examples-loader.js b/loaders/examples-loader.js
@@ -30,7 +30,7 @@ function examplesLoader(source) {
 		: undefined;
 
 	// Load examples
-	const examples = chunkify(source, updateExample);
+	const examples = chunkify(source, updateExample, query.customLangs);
 
 	// We're analysing the examples' source code to figure out the require statements. We do it manually with regexes,
 	// because webpack unfortunately doesn't expose its smart logic for rewriting requires

diff --git a/loaders/utils/__tests__/__snapshots__/chunkify.spec.js.snap b/loaders/utils/__tests__/__snapshots__/chunkify.spec.js.snap
@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should even parse examples with custom extensions 1`] = `
+Array [
+  Object {
+    "content": "Custom extensions",
+    "type": "markdown",
+  },
+  Object {
+    "content": 
+<AppButton>
+  Example in vue
+</AppButton>
+,
+    "settings": Object {},
+    "type": "code",
+  },
+]
+`;
+
 exports[`should parse examples settings correctly 1`] = `
 Array [
   Object {
@@ -54,6 +72,30 @@ Array [
 ]
 `;
 
+exports[`should parse undefined custom extensions without throwing 1`] = `
+Array [
+  Object {
+    "content": "Undefined extensions (default)",
+    "type": "markdown",
+  },
+  Object {
+    "content": 
+<AppButton>
+  Example in jsx with undefined extensions
+</AppButton>
+,
+    "settings": Object {},
+    "type": "code",
+  },
+  Object {
+    "content": "\`\`\`pizza
+Unknown language: \\"pizza\\"
+\`\`\`",
+    "type": "markdown",
+  },
+]
+`;
+
 exports[`should separate Markdown and component examples 1`] = `
 Array [
   Object {

diff --git a/loaders/utils/__tests__/chunkify.spec.js b/loaders/utils/__tests__/chunkify.spec.js
@@ -127,3 +127,31 @@ it('should call updateExample function for example', () => {
 	const actual = chunkify(markdown, updateExample);
 	expect(actual).toEqual(expected);
 });
+
+it('should even parse examples with custom extensions', () => {
+	const markdown = `
+Custom extensions
+
+\`\`\`vue
+<AppButton>Example in vue</AppButton>
+\`\`\`
+`;
+	const actual = chunkify(markdown, undefined, ['vue']);
+	expect(actual).toMatchSnapshot();
+});
+
+it('should parse undefined custom extensions without throwing', () => {
+	const markdown = `
+Undefined extensions (default)
+
+\`\`\`jsx
+<AppButton>Example in jsx with undefined extensions</AppButton>
+\`\`\`
+
+\`\`\`pizza
+<AppButton>Example in pizza with undefined extensions (test double)</AppButton>
+\`\`\`
+`;
+	const actual = chunkify(markdown, undefined, undefined);
+	expect(actual).toMatchSnapshot();
+});
diff --git a/loaders/utils/chunkify.js b/loaders/utils/chunkify.js
@@ -11,9 +11,10 @@ const CODE_PLACEHOLDER = '<%{#code#}%>';
  *
  * @param {string} markdown
  * @param {Function} updateExample
+ * @param {Array<string>} playgroundLangs
  * @returns {Array}
  */
-module.exports = function chunkify(markdown, updateExample) {
+module.exports = function chunkify(markdown, updateExample, playgroundLangs = PLAYGROUND_LANGS) {
 	const codeChunks = [];
 
 	/*
@@ -34,7 +35,7 @@ module.exports = function chunkify(markdown, updateExample) {
 
 				const lang = example.lang;
 				node.lang = lang;
-				if (!lang || (PLAYGROUND_LANGS.indexOf(lang) !== -1 && !example.settings.static)) {
+				if (!lang || (playgroundLangs.indexOf(lang) !== -1 && !example.settings.static)) {
 					codeChunks.push({
 						type: 'code',
 						content: example.content,