@primer/gatsby-theme-doctocat 3.1.1 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @primer/gatsby-theme-doctocat
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`438eadb`](https://github.com/primer/doctocat/commit/438eadbae21b14c246ca7f6c9f405a1c4a00728a) [#332](https://github.com/primer/doctocat/pull/332) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Support function for `live-code-scope`
8
+
3
9
  ## 3.1.1
4
10
 
5
11
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/gatsby-theme-doctocat",
3
- "version": "3.1.1",
3
+ "version": "3.2.0",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -6,12 +6,12 @@ import React from 'react'
6
6
  import ClipboardCopy from './clipboard-copy'
7
7
  import LiveCode from './live-code'
8
8
 
9
- function Code({className, children, live, noinline}) {
9
+ function Code({className, children, live, noinline, metastring}) {
10
10
  const language = className ? className.replace(/language-/, '') : ''
11
11
  const code = children.trim()
12
12
 
13
13
  if (live) {
14
- return <LiveCode code={code} language={language} noinline={noinline} />
14
+ return <LiveCode code={code} language={language} noinline={noinline} metastring={metastring} />
15
15
  }
16
16
 
17
17
  return (
@@ -34,14 +34,24 @@ function wrapWithFragment(jsx) {
34
34
  return `<React.Fragment>${jsx}</React.Fragment>`
35
35
  }
36
36
 
37
- function LiveCode({code, language, noinline}) {
37
+ const getResolvedScope = metastring => {
38
+ if (typeof scope === 'function') return scope(metastring)
39
+ return scope
40
+ }
41
+
42
+ function LiveCode({code, language, noinline, metastring}) {
38
43
  const theme = React.useContext(ThemeContext)
39
44
  const [liveCode, setLiveCode] = useState(code)
40
45
  const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
41
46
 
42
47
  return (
43
48
  <Flex sx={{flexDirection: 'column', mb: 3}}>
44
- <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
49
+ <LiveProvider
50
+ scope={getResolvedScope(metastring)}
51
+ code={liveCode}
52
+ transformCode={languageTransformers[language]}
53
+ noInline={noinline}
54
+ >
45
55
  <Flex
46
56
  sx={{
47
57
  border: '1px solid',