@cdc/markup-include 4.26.2 → 4.26.3

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.26.2",
+  "version": "4.26.3",
   "description": "React component for displaying HTML content from an outside link",
   "license": "Apache-2.0",
   "author": "Rob Shelnutt <rob@blackairplane.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.2",
+    "@cdc/core": "^4.26.3",
     "axios": "^1.13.2",
-    "interweave": "^13.1.1",
+    "dompurify": "^3.3.1",
     "lodash": "^4.17.23",
     "react-accessible-accordion": "^5.0.1"
   },
@@ -19,7 +19,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "main": "dist/cdcmarkupinclude",
   "moduleName": "CdcMarkupInclude",

package/src/CdcMarkupInclude.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useCallback, useRef, useReducer, useMemo } from 'react'
-import _ from 'lodash'
 // external
-import { Markup } from 'interweave'
+import DOMPurify from 'dompurify'
 import axios from 'axios'
 
 // cdc
@@ -11,6 +10,7 @@ import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
 import ConfigContext from './ConfigContext'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import EditorPanel from '../src/components/EditorPanel'
 import defaults from './data/initial-state'
 
@@ -19,7 +19,7 @@ import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import markupIncludeReducer from './store/markupInclude.reducer'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'
 // styles
 import './cdcMarkupInclude.style.css'
 import './scss/main.scss'
@@ -79,10 +79,6 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
 
   const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
 
-  const shouldApplyTopPadding =
-    visual?.border || visual?.background || (contentEditor?.title && contentEditor?.titleStyle === 'legacy')
-  const shouldApplySidePadding = visual?.border || visual?.accent || visual?.background
-
   // Default Functions
   const updateConfig = newConfig => {
     Object.keys(defaults).forEach(key => {
@@ -112,8 +108,9 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     let responseData = response.data ?? {}
 
     if (response.dataUrl) {
-      const dataString = await fetch(response.dataUrl)
-      responseData = await dataString.json()
+      const { data, dataMetadata } = await fetchRemoteData(response.dataUrl)
+      responseData = data
+      response.dataMetadata = dataMetadata
     }
 
     response.data = responseData
@@ -203,63 +200,29 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   }
 
   /**
-   * Transforms HTML by extracting <style> tags and applying their CSS rules as inline styles.
-   * This ensures that the CSS is applied only to this COVE visualization.
+   * Extracts <style> tags from HTML and scopes them using CSS nesting under the given scope ID.
    */
-  const applyStyleTagsAsInlineStyles = (html: string): string => {
-    if (!html || typeof html !== 'string') return html
+  const extractAndScopeStyles = (html: string, scopeId: string): { scopedCSS: string; cleanHTML: string } => {
+    if (!html || typeof html !== 'string') return { scopedCSS: '', cleanHTML: html }
 
-    // Use DOMParser to parse HTML
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
 
-    // Extract all <style> elements
     const styleElements = doc.querySelectorAll('style')
-    if (styleElements.length === 0) return html
-
-    // Parse CSS rules
-    const sheet = new CSSStyleSheet()
-    const cssRules: Array<{ selector: string; styles: string }> = []
+    if (styleElements.length === 0) return { scopedCSS: '', cleanHTML: html }
 
+    const cssFragments: string[] = []
     styleElements.forEach(styleEl => {
-      try {
-        // replaceSync parses the CSS and throws if invalid
-        sheet.replaceSync(styleEl.textContent || '')
-
-        // Extract parsed rules from the stylesheet
-        for (let i = 0; i < sheet.cssRules.length; i++) {
-          const rule = sheet.cssRules[i]
-          if (rule instanceof CSSStyleRule) {
-            cssRules.push({
-              selector: rule.selectorText,
-              styles: rule.style.cssText
-            })
-          }
-        }
-      } catch (e) {
-        console.warn('Markup Include: Invalid CSS in style tag', e)
+      const text = styleEl.textContent?.trim()
+      if (text) {
+        cssFragments.push(text)
       }
-
       styleEl.remove()
     })
 
-    // Apply each CSS rule to matching elements
-    for (const rule of cssRules) {
-      try {
-        const elements = doc.body.querySelectorAll(rule.selector)
-
-        elements.forEach(el => {
-          const existingStyle = el.getAttribute('style') || ''
-          const newStyle = existingStyle ? `${existingStyle}; ${rule.styles}` : rule.styles
-          el.setAttribute('style', newStyle)
-        })
-      } catch (e) {
-        // Skip invalid selectors (e.g., pseudo-selectors like :hover won't match)
-        console.warn(`Markup Include: Could not apply CSS rule for selector "${rule.selector}"`, e)
-      }
-    }
+    const scopedCSS = cssFragments.length > 0 ? `#${scopeId} {\n${cssFragments.join('\n')}\n}` : ''
 
-    return doc.body.innerHTML
+    return { scopedCSS, cleanHTML: doc.body.innerHTML }
   }
 
   //Load initial config
@@ -289,69 +252,69 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
         allowHideSection,
         filters: config?.filters || [],
         datasets,
-        configDataKey: config?.dataKey
+        configDataKey: config?.dataKey,
+        locale: config?.locale,
+        dataMetadata: config?.dataMetadata
       })
     : { processedContent: parseBodyMarkup(urlMarkup), shouldHideSection: false, shouldShowNoDataMessage: false }
 
-  const markup = applyStyleTagsAsInlineStyles(processedMarkup.processedContent)
+  const scopeId = `cove-mi-${config?.runtime?.uniqueId || 'default'}`
+  const { scopedCSS, cleanHTML } = extractAndScopeStyles(processedMarkup.processedContent, scopeId)
+  const sanitizedHTML = cleanHTML ? DOMPurify.sanitize(cleanHTML) : ''
 
   const hideMarkupInclude = processedMarkup.shouldHideSection
   const _showNoDataMessage = processedMarkup.shouldShowNoDataMessage
 
   if (loading === false) {
-    content = (
-      <>
-        {isEditor && <EditorPanel datasets={datasets} />}
-
-        {!hideMarkupInclude && (
-          <Layout.Responsive isEditor={isEditor}>
-            <div className='markup-include-content-container cove-component__content no-borders'>
-              <Title
-                title={title}
-                isDashboard={isDashboard}
-                titleStyle={contentEditor.titleStyle}
-                config={config}
-                classes={[`${theme}`, 'mb-0']}
-                noContent={!markup}
-              />
-              <div className={`markup-include-component ${contentClasses.join(' ')}`}>
-                <div className={`${innerContainerClasses.join(' ')}`}>
-                  {/* Filters */}
-                  {config.filters && config.filters.length > 0 && (
-                    <Filters
-                      config={config}
-                      setFilters={setFilters}
-                      excludedData={data || []}
-                      dimensions={[0, 0]}
-                      interactionLabel={interactionLabel || 'markup-include'}
-                    />
-                  )}
-                  <div
-                    className={`cove-component__content-wrap${shouldApplyTopPadding ? ' has-top-padding' : ''}${
-                      shouldApplySidePadding ? ' has-side-padding' : ''
-                    }`}
-                  >
-                    {_showNoDataMessage && (
-                      <div className='no-data-message'>
-                        <p>{`${noDataMessageText}`}</p>
-                      </div>
-                    )}
-                    {!markupError && !_showNoDataMessage && <Markup allowElements={!!urlMarkup} content={markup} />}
-                    {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
-                  </div>
-                </div>
-              </div>
-              <FootnotesStandAlone
-                config={configObj?.footnotes}
-                filters={config?.filters || []}
-                markupVariables={markupVariables}
-                enableMarkupVariables={config?.enableMarkupVariables}
-                data={data}
-              />
-            </div>
-          </Layout.Responsive>
+    content = !hideMarkupInclude && (
+      <VisualizationContent
+        innerClassName={`markup-include-content-container ${innerContainerClasses.join(' ')}`.trim()}
+        bodyClassName={`markup-include-component ${contentClasses.join(' ')}`.trim()}
+        message={
+          config.filters && config.filters.length > 0 ? (
+            <Filters
+              config={config}
+              setFilters={setFilters}
+              excludedData={data || []}
+              dimensions={[0, 0]}
+              interactionLabel={interactionLabel || 'markup-include'}
+            />
+          ) : null
+        }
+        header={
+          <Title
+            title={title}
+            isDashboard={isDashboard}
+            titleStyle={contentEditor?.titleStyle}
+            config={config}
+            classes={[`${theme}`, 'mb-0']}
+            noContent={!sanitizedHTML}
+          />
+        }
+        footer={
+          <FootnotesStandAlone
+            config={configObj?.footnotes}
+            filters={config?.filters || []}
+            markupVariables={markupVariables}
+            enableMarkupVariables={config?.enableMarkupVariables}
+            data={data}
+            dataMetadata={config?.dataMetadata}
+          />
+        }
+      >
+        {_showNoDataMessage && (
+          <div className='no-data-message'>
+            <p>{`${noDataMessageText}`}</p>
+          </div>
+        )}
+        {!markupError && !_showNoDataMessage && (
+          <div id={scopeId}>
+            {scopedCSS && <style>{scopedCSS}</style>}
+            <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+          </div>
         )}
-      </>
+        {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
+      </VisualizationContent>
     )
   }
 
@@ -370,9 +333,9 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     <ErrorBoundary component='CdcMarkupInclude'>
       <ConfigContext.Provider value={{ config, updateConfig, loading, data: data, setParentConfig, isDashboard }}>
         {!config?.newViz && config?.runtime && config?.runtime.editorErrorMessage && <Error />}
-        <Layout.VisualizationWrapper config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+        <VisualizationContainer config={config} isEditor={isEditor} editorPanel={<EditorPanel datasets={datasets} />}>
           {content}
-        </Layout.VisualizationWrapper>
+        </VisualizationContainer>
       </ConfigContext.Provider>
     </ErrorBoundary>
   )

package/src/_stories/MarkupInclude.Editor.stories.tsx

@@ -138,7 +138,7 @@ export const GeneralSectionTests: Story = {
       'Title Update',
       () => {
         const modernTitle = canvasElement.querySelector('.cove-title')
-        const legacyTitle = canvasElement.querySelector('.cove-component__header h2')
+        const legacyTitle = canvasElement.querySelector('.cove-visualization__header h2')
         const titleElement = modernTitle || legacyTitle
         return titleElement?.textContent?.trim() || ''
       },
@@ -150,7 +150,7 @@ export const GeneralSectionTests: Story = {
     )
 
     const modernHeader = canvasElement.querySelector('.cove-title')
-    const legacyHeader = canvasElement.querySelector('.cove-component__header h2')
+    const legacyHeader = canvasElement.querySelector('.cove-visualization__header h2')
     const headerElement = modernHeader || legacyHeader
     expect(headerElement).toBeTruthy()
     expect(headerElement!.textContent?.trim()).toBe('Updated Markup Include Title E2E')
@@ -226,7 +226,7 @@ export const ContentEditorTests: Story = {
     await performAndAssert(
       'HTML Content Update',
       () => {
-        const contentElement = canvasElement.querySelector('.cove-component__content')
+        const contentElement = canvasElement.querySelector('.cove-visualization__body')
         return contentElement?.innerHTML || ''
       },
       async () => {
@@ -255,7 +255,7 @@ export const ContentEditorTests: Story = {
       'Source URL Update and Content Loading',
       () => ({
         inputValue: srcUrlInput.value,
-        contentText: canvasElement.querySelector('.cove-component__content')?.textContent || ''
+        contentText: canvasElement.querySelector('.cove-visualization__body')?.textContent || ''
       }),
       async () => {
         await userEvent.clear(srcUrlInput)
@@ -296,7 +296,7 @@ export const VisualSectionTests: Story = {
     await waitForEditor(canvas)
     await openAccordion(canvas, 'Visual')
 
-    const contentContainer = () => canvasElement.querySelector('.cove-component__content') as HTMLElement
+    const contentContainer = () => canvasElement.querySelector('.cove-visualization__body') as HTMLElement
     const visualContainer = () => canvasElement.querySelector('.markup-include-component') as HTMLElement
     expect(contentContainer()).toBeTruthy()
     expect(visualContainer()).toBeTruthy()
@@ -306,21 +306,16 @@ export const VisualSectionTests: Story = {
     // Expectation: Theme class changes on component
     // ============================================================================
     const getThemeState = () => {
-      // Use the contentContainer like other tests, and check its parent for theme classes
       const content = contentContainer()
       if (!content) return { theme: '', classes: '', element: 'content not found' }
 
-      // Check content itself and its parent for theme classes
+      // Theme is applied to the outer cove-visualization wrapper — traverse up to find it
+      const themeWrapper = content.closest('[class*="theme-"]') as HTMLElement
+      const theme = themeWrapper ? Array.from(themeWrapper.classList).find(cls => cls.startsWith('theme-')) || '' : ''
+
       const contentClasses = Array.from(content.classList).join(' ')
       const parentClasses = content.parentElement ? Array.from(content.parentElement.classList).join(' ') : ''
 
-      const contentTheme = Array.from(content.classList).find(cls => cls.startsWith('theme-')) || ''
-      const parentTheme = content.parentElement
-        ? Array.from(content.parentElement.classList).find(cls => cls.startsWith('theme-')) || ''
-        : ''
-
-      const theme = contentTheme || parentTheme || ''
-
       return {
         theme,
         classes: contentClasses + ' | parent: ' + parentClasses,
@@ -380,7 +375,7 @@ export const VisualSectionTests: Story = {
       'Border Color Theme Toggle',
       () => ({
         checked: borderColorThemeCheckbox.checked,
-        hasBorderColorTheme: visualContainer().classList.contains('component--has-borderColorTheme')
+        hasBorderColorTheme: visualContainer().classList.contains('component--has-border-color-theme')
       }),
       async () => {
         const checkboxWrapper =
@@ -455,7 +450,7 @@ export const VisualSectionTests: Story = {
       'Hide Background Color Toggle',
       () => ({
         checked: hideBackgroundCheckbox.checked,
-        hideBackground: visualContainer().classList.contains('component--hideBackgroundColor')
+        hideBackground: visualContainer().classList.contains('component--hide-background-color')
       }),
       async () => {
         const checkboxWrapper = hideBackgroundCheckbox.closest('.cove-input__checkbox--small') || hideBackgroundCheckbox

package/src/cdcMarkupInclude.style.css

@@ -1,39 +1,43 @@
-.cdc-open-viz-module.markup-include {
+.cove-visualization.markup-include {
   .spacing-wrapper {
     background-color: var(--lightGray) !important;
   }
+
   .cove-tooltip-variable {
     display: none;
   }
 
-  .markup-include-content-container.cove-component__content {
-    .markup-include-component.cove-component__content:not(.component--hideBackgroundColor, .component--has-background) {
+  c .markup-include-content-container.cove-visualization__inner {
+    .markup-include-component.cove-visualization__body:not(.component--hide-background-color, .component--has-background) {
       background-color: white;
     }
   }
 }
 
-.cdc-open-viz-module.markup-include.isEditor {
+.cove-visualization.markup-include.is-editor {
   .cove-tooltip-variable {
-    position: relative;
-    display: inline;
     background: var(--orange-tertiary);
+    display: inline;
+    position: relative;
+
     .cove-tooltip-value {
-      display: none;
-      position: absolute;
       background: var(--white);
       border: 1px solid black;
+      display: none;
       font-size: 16px;
+      max-width: 500px;
       padding: 10px;
+      position: absolute;
       width: 100vw;
-      max-width: 500px;
       z-index: 9999;
     }
-    &:hover > .cove-tooltip-value {
+
+    &:hover>.cove-tooltip-value {
       display: block;
     }
   }
+
   .cove-markup-include-variable-value {
     display: none !important;
   }
-}
+}

package/src/components/EditorPanel/EditorPanel.styles.css

@@ -1,4 +1,4 @@
-.cdc-open-viz-module.markup-include {
+.cove-visualization.markup-include {
   .need-data-source-prompt {
     color: var(--gray);
     font-size: 0.8rem;

package/src/components/EditorPanel/EditorPanel.tsx

@@ -14,7 +14,8 @@ import Icon from '@cdc/core/components/ui/Icon'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import MarkupVariablesEditor from '@cdc/core/components/EditorPanel/components/MarkupVariablesEditor'
 import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
-import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
+import StyleTreatmentSection from '@cdc/core/components/EditorPanel/sections/StyleTreatmentSection'
+import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 import { Datasets } from '@cdc/core/types/DataSet'
 
 // styles
@@ -26,9 +27,24 @@ type MarkupIncludeEditorPanelProps = {
 
 const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
   const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
-  const { contentEditor, theme, visual } = config
+  const { contentEditor, theme, visual } = config || {}
   const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
   const updateField = updateFieldFactory(config, updateConfig, true)
+  const styleTreatment = visual?.tp5Treatment ? 'tp5' : 'legacy'
+
+  const handleStyleTreatmentChange = (value: string) => {
+    const useTp5Treatment = value === 'tp5'
+    updateConfig({
+      ...config,
+      visual: {
+        ...config.visual,
+        tp5Treatment: useTp5Treatment,
+        border: useTp5Treatment ? false : config.visual?.border,
+        borderColorTheme: useTp5Treatment ? false : config.visual?.borderColorTheme,
+        accent: useTp5Treatment ? false : config.visual?.accent
+      }
+    })
+  }
 
   const textAreaInEditorContainer = useRef(null)
 
@@ -67,7 +83,7 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
               updateField={updateField}
             />
             <Select
-              value={contentEditor.titleStyle || 'small'}
+              value={contentEditor?.titleStyle || 'small'}
               section='contentEditor'
               fieldName='titleStyle'
               label='Title Style'
@@ -92,6 +108,29 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
                 </Tooltip>
               }
             />
+            <Select
+              value={config.locale}
+              fieldName='locale'
+              label='Language for dates and numbers'
+              updateField={updateField}
+              options={[
+                { value: 'en-US', label: 'English (en-US)' },
+                { value: 'es-MX', label: 'Spanish (es-MX)' }
+              ]}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Change the language (locale) for this visualization to alter the way dates and numbers are
+                      formatted.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
           </Accordion.Section>
           <Accordion.Section title='Content Editor'>
             <span className='divider-heading'>Enter Markup</span>
@@ -131,7 +170,23 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
             </div>
           </Accordion.Section>
           <Accordion.Section title='Visual'>
-            <VisualSection config={config} updateField={updateField} updateConfig={updateConfig} />
+            <HeaderThemeSelector
+              selectedTheme={config.theme}
+              onThemeSelect={theme => updateConfig({ ...config, theme })}
+            />
+            <StyleTreatmentSection
+              styleTreatment={styleTreatment}
+              onStyleTreatmentChange={handleStyleTreatmentChange}
+              showStyleTreatment={false}
+              border={config.visual?.border}
+              borderColorTheme={config.visual?.borderColorTheme}
+              accent={config.visual?.accent}
+              background={config.visual?.background}
+              hideBackgroundColor={config.visual?.hideBackgroundColor}
+              showBackground
+              showHideBackgroundColor
+              updateField={updateField}
+            />
           </Accordion.Section>
           {isDashboard && (
             <Accordion.Section title='Footnotes'>
@@ -147,6 +202,7 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
               onChange={handleMarkupVariablesChange}
               enableMarkupVariables={config.enableMarkupVariables || false}
               onToggleEnable={handleToggleEnable}
+              dataMetadata={config.dataMetadata}
             />
           </Accordion.Section>
         </Accordion>

package/src/scss/main.scss

@@ -1,16 +1,12 @@
-.markup-include {
-  .cove-component__content-wrap {
-    padding: 0;
+@import '@cdc/core/styles/layout/wrapper-padding';
 
-    &.has-top-padding {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-    }
+.cove-visualization.type-markup-include {
+  .cove-visualization__body {
+    @include cove-visualization-body-padding;
+  }
 
-    &.has-side-padding {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
+  .cove-visualization__body-wrap {
+    @include cove-visualization-body-wrap-inline-padding;
 
     h1,
     h2,
@@ -22,9 +18,16 @@
       margin-top: auto;
       margin-bottom: auto;
     }
+
+    // keep markup include images inlines on dashboards
+    // e.g. requested to help here: https://www.cdc.gov/fluview/surveillance/2026-week-10.html
+    // needed for backwards compatibility with existing dashboards, but also to prevent any future issues with images in markup include visualizations being forced to display as blocks
+    span>img {
+      display: inline;
+    }
   }
 
-  .cove-component__content.component--hideBackgroundColor {
+  .cove-visualization__body.component--hide-background-color {
     background: transparent;
   }
 
@@ -47,7 +50,8 @@
     float: left;
   }
 }
+
 .cove-editor .cove-editor__content {
   padding-left: 350px;
   display: flex;
-}
+}

package/src/test/CdcMarkupInclude.test.jsx

@@ -1,11 +1,11 @@
-import path from 'path'
+import path from 'node:path'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
 describe('Markup Include', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
 })