[v2] Generate permalink to specific JSX in REPL demo

CHANGELOG.md

@@ -31,6 +31,7 @@ jsx-slack v2 has improved JSX structure and built-in components to output the re
 - `value` prop as an alias into `initialXXX` prop in some interactive components
 - Added JSDoc to many public APIs and components
 - Support new JSX transpile via `automatic` runtime in Babel >= 7.9 _(experimental)_ ([#142](https://github.com/speee/jsx-slack/pull/142))
+- REPL demo now generates the permalink to specific JSX ([#149](https://github.com/speee/jsx-slack/pull/149))
 
 ### Fixed
 

demo/convert.js

@@ -0,0 +1,33 @@
+import { JSXSlack, jsxslack } from '../src/index'
+import { isValidComponent } from '../src/jsx'
+
+const generateUrl = (params) => {
+  const q = new URLSearchParams()
+  Object.keys(params).forEach((k) => q.append(k, params[k]))
+
+  return `https://api.slack.com/tools/block-kit-builder?${q}`
+}
+
+export const convert = (jsx) => {
+  const output = jsxslack([jsx])
+
+  if (!JSXSlack.isValidElement(output))
+    throw new Error('Cannot parse as jsx-slack component.')
+
+  const ret = { text: JSON.stringify(output, null, 2) }
+  const encoded = JSON.stringify(output).replace(/\+/g, '%2b')
+
+  if (isValidComponent(output.$$jsxslack.type)) {
+    const { name } = output.$$jsxslack.type.$$jsxslackComponent
+
+    if (name === 'Blocks') {
+      ret.url = generateUrl({ blocks: encoded, mode: 'message' })
+    } else if (name === 'Modal') {
+      ret.url = generateUrl({ view: encoded, mode: 'modal' })
+    } else if (name === 'Home') {
+      ret.url = generateUrl({ view: encoded, mode: 'appHome' })
+    }
+  }
+
+  return ret
+}

demo/example.js

@@ -1,4 +1,4 @@
-export const message = `
+const message = `
 <Blocks>
   <Section>
     <p>
@@ -25,7 +25,7 @@ export const message = `
 </Blocks>
 `.trim()
 
-export const modal = `
+const modal = `
 <Modal title="My first modal" close="Cancel">
   <Section>
     <p>
@@ -52,7 +52,7 @@ export const modal = `
 </Modal>
 `.trim()
 
-export const home = `
+const home = `
 <Home>
   <Image src="https://source.unsplash.com/random/960x240?home" alt="home" />
   <Section>
@@ -87,3 +87,7 @@ export const home = `
   </Actions>
 </Home>
 `.trim()
+
+export default Object.freeze(
+  Object.assign(Object.create(null), { message, modal, home })
+)

demo/index.css

@@ -11,10 +11,10 @@
   --button-active-bg: #e8e8e8;
   --button-color: #333;
   --border: rgba(0, 0, 0, 0.2);
+  --focused-border: #69f;
 
   --textarea-bg: #fff;
   --textarea-readonly-bg: #f6f6f6;
-  --textarea-focused: #69f;
 
   --error-bg: #fec;
   --error-color: #c00;
@@ -61,23 +61,35 @@ a:not(.button) {
   font-size: 15px;
   height: 30px;
   justify-content: center;
+  outline: 0;
   overflow: hidden;
   padding: 0 20px;
-  transition: background-color linear 0.15s, box-shadow linear 0.15s;
+  transition: background-color linear 0.15s, filter linear 0.15s;
   user-select: none;
+  will-change: transform; /* to fix drop-shadow transition in Safari */
 }
 
-.button:hover {
+.button:hover,
+.button:focus {
   background: var(--button-hover-bg);
-  box-shadow: 0 1px 3px rgba(128, 128, 128, 0.25);
+  filter: drop-shadow(0 1px 3px rgba(128, 128, 128, 0.25));
 }
 
 .button:hover:active {
   background: var(--button-active-bg);
-  box-shadow: 0 1px 6px rgba(128, 128, 128, 0.35);
+  filter: drop-shadow(0 1px 6px rgba(128, 128, 128, 0.35));
   transition: none;
 }
 
+.button::-moz-focus-inner {
+  border: 0;
+}
+
+.button:focus {
+  border-color: var(--focused-border);
+  box-shadow: 0 0 0 1px var(--background), inset 0 0 0 1px var(--background);
+}
+
 .button.disabled {
   pointer-events: none;
   opacity: 0.4;
@@ -120,16 +132,25 @@ select {
   font-size: 15px;
   height: 30px;
   line-height: 29px;
+  outline: 0;
   padding: 0 30px 0 10px;
-  /* transition: background-color linear 0.15s, box-shadow linear 0.15s; */
-  transition: box-shadow linear 0.15s;
+  transition: background-color linear 0.15s, filter linear 0.15s;
 }
 
-select:hover {
-  box-shadow: 0 1px 3px rgba(128, 128, 128, 0.25);
+select:hover,
+select:focus {
+  filter: drop-shadow(0 1px 3px rgba(128, 128, 128, 0.25));
+  --button-bg: var(--button-hover-bg);
+}
 
-  /* Transition for background-color makes strange options in Firefox :( */
-  /* --button-bg: var(--button-hover-bg); */
+select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--button-color);
+}
+
+select:focus {
+  border-color: var(--focused-border);
+  box-shadow: 0 0 0 1px var(--background), inset 0 0 0 1px var(--background);
 }
 
 /* Header */
@@ -198,7 +219,7 @@ main > img {
   font-size: 16px;
   padding: 20px;
   outline: 0;
-  transition: border-color linear 0.15s;
+  transition: filter linear 0.15s;
 }
 
 #jsx {
@@ -212,10 +233,9 @@ main > img {
   border-color: var(--border);
   color: var(--secondary-color);
   resize: none;
-}
-
-#json:focus {
-  --border: var(--textarea-focused);
+  scrollbar-color: var(--border) transparent;
+  scrollbar-width: thin;
+  will-change: transform; /* to fix drop-shadow transition in Safari */
 }
 
 #jsx > .CodeMirror {
@@ -230,36 +250,39 @@ main > img {
   right: -1px;
   top: -1px;
   transition: inherit;
+  will-change: transform; /* to fix drop-shadow transition in Safari */
 }
 
+#json:focus,
 #jsx > .CodeMirror.CodeMirror-focused {
-  --border: var(--textarea-focused);
+  --border: var(--focused-border);
+  box-shadow: 0 0 0 1px var(--background), inset 0 0 0 1px var(--background);
+  filter: drop-shadow(0 1px 3px rgba(128, 128, 128, 0.25));
 }
 
 #jsx > .CodeMirror .CodeMirror-lines {
   padding: 20px;
 }
 
 #jsx > .CodeMirror .CodeMirror-vscrollbar {
-  outline: 0;
   cursor: auto;
+  outline: 0;
+  scrollbar-color: var(--border) transparent;
+  scrollbar-width: thin;
 }
 
-#jsx > .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-
+#jsx > .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar,
 #json::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 #jsx > .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
 #json::-webkit-scrollbar-thumb {
   background-color: var(--border);
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 8px;
 }
 
 #error {

demo/index.js

@@ -1,7 +1,9 @@
 import CodeMirror from 'codemirror'
 import debounce from 'lodash.debounce'
 import { JSXSlack, jsxslack } from '../src/index'
-import * as _examples from './example'
+import { convert } from './convert'
+import examples from './example'
+import { parseHash, setJSXHash } from './parse-hash'
 import schema from './schema'
 
 import 'codemirror/mode/javascript/javascript'
@@ -21,12 +23,13 @@ const errorDetails = document.getElementById('errorDetails')
 const examplesSelect = document.getElementById('examples')
 const previewBtn = document.getElementById('preview')
 
-const parseHash = (hash = window.location.hash) => {
-  if (!hash.toString().startsWith('#')) return undefined
-  return decodeURIComponent(hash.toString().slice(1))
-}
+// Parse hash
+const initialValue = parseHash()
 
-const examples = Object.assign(Object.create(null), _examples)
+if (initialValue.example) {
+  examplesSelect.value = initialValue.example
+  if (examplesSelect.value !== initialValue.example) examplesSelect.value = ''
+}
 
 // CodeMirror
 const completeAfter = (cm, pred) => {
@@ -70,76 +73,45 @@ const jsxEditor = CodeMirror(jsx, {
   indentUnit: 2,
   lineWrapping: true,
   mode: 'jsx',
-  value: (() => {
-    const hash = parseHash()
-
-    if (examples[hash]) {
-      examplesSelect.value = hash
-      if (examplesSelect.value !== hash) examplesSelect.value = ''
-
-      return examples[hash]
-    }
-
-    return examples.message
-  })(),
+  value: initialValue.text,
 })
 
-const setPreview = (query) => {
-  previewBtn.removeAttribute('data-mode')
-
-  if (query === false) {
+const setPreview = (url) => {
+  if (url) {
+    previewBtn.setAttribute('tabindex', 0)
+    previewBtn.setAttribute('href', url)
+    previewBtn.classList.remove('disabled')
+  } else {
     previewBtn.setAttribute('tabindex', -1)
     previewBtn.classList.add('disabled')
-  } else if (typeof query === 'object') {
-    const q = new URLSearchParams()
-    Object.keys(query).forEach((k) => q.append(k, query[k]))
-
-    if (query.mode) previewBtn.setAttribute('data-mode', query.mode)
-
-    previewBtn.removeAttribute('tabindex')
-    previewBtn.setAttribute(
-      'href',
-      `https://api.slack.com/tools/block-kit-builder?${q}`
-    )
-    previewBtn.classList.remove('disabled')
   }
 }
 
-const convert = () => {
+const process = () => {
   try {
-    const output = jsxslack([jsxEditor.getValue()])
-
-    if (!JSXSlack.isValidElement(output))
-      throw new Error('Cannot parse as jsx-slack component.')
+    const { text, url } = convert(jsxEditor.getValue())
 
-    const encoded = JSON.stringify(output).replace(/\+/g, '%2b')
-
-    json.value = JSON.stringify(output, null, '  ')
-
-    if (Array.isArray(output)) {
-      setPreview({ blocks: encoded, mode: 'message' })
-    } else if (output.type === 'modal') {
-      setPreview({ view: encoded, mode: 'modal' })
-    } else if (output.type === 'home') {
-      setPreview({ view: encoded, mode: 'appHome' })
-    } else {
-      setPreview(false)
-    }
+    json.value = text
+    setPreview(url)
 
     error.classList.add('hide')
   } catch (e) {
-    // eslint-disable-next-line no-console
     console.error(e)
 
     errorDetails.textContent = e.message.trim()
     error.classList.remove('hide')
   }
 }
 
-const onChangeEditor = debounce(convert, 600)
+const debouncedProcess = debounce(process, 600)
+const onChangeEditor = () => {
+  setJSXHash(jsxEditor.getValue())
+  debouncedProcess()
+}
+
 jsxEditor.on('change', onChangeEditor)
 
-convert()
+process()
 
 examplesSelect.addEventListener('change', () => {
   if (examplesSelect.value) {
@@ -148,7 +120,7 @@ examplesSelect.addEventListener('change', () => {
 
     window.location.hash = `#${examplesSelect.value}`
     jsxEditor.setValue(examples[examplesSelect.value])
-    convert()
+    process()
   }
 })