handsontable · sequba · Oct 11, 2023 · Dec 20, 2023 · Feb 28, 2024 · Mar 1, 2024
diff --git a/docs/.vuepress/code-structure-builder/buildJavascriptBody.js b/docs/.vuepress/code-structure-builder/buildJavascriptBody.js
@@ -1,4 +1,4 @@
-const buildJavascriptBody = ({ id, html, js, css, version, hyperformulaVersion, sandbox }) => {
+const buildJavascriptBody = ({ id, html, js, css, version, hyperformulaVersion, sandbox, lang }) => {
  if (sandbox === 'stackblitz') {
  return {
  files: {
@@ -29,7 +29,7 @@ const buildJavascriptBody = ({ id, html, js, css, version, hyperformulaVersion,
  'styles.css': {
  content: css
  },
- 'index.js': {
+ [`index.${lang}`]: {
  content: `import './styles.css'
 ${js}`
  },
@@ -73,14 +73,14 @@ ${js}`
 
  <body>
  ${html || `<div id="${id}"></div>`}
- <script src="src/index.js"></script>
+ <script src="src/index.${lang}"></script>
  </body>
 </html>`
  },
  'src/styles.css': {
  content: css
  },
- 'src/index.js': {
+ [`src/index.${lang}`]: {
  content: js.replace('import { HyperFormula } from \'hyperformula\';', '')
  }
  }

diff --git a/docs/.vuepress/code-structure-builder/getBody.js b/docs/.vuepress/code-structure-builder/getBody.js
@@ -5,12 +5,12 @@ const { buildReactBody } = require('./buildReactBody');
 const { buildVue3Body } = require('./buildVue3Body');
 const { buildVueBody } = require('./buildVueBody');
 
-const getBody = (id, html, js, css, docsVersion, preset, sandbox) => {
+const getBody = ({ id, html, js, css, docsVersion, preset, sandbox, lang }) => {
  const version = formatVersion(docsVersion);
  const hyperformulaVersion = '^2.4.0';
 
  if (/hot(-.*)?/.test(preset)) {
- return buildJavascriptBody({ id, html, js, css, version, hyperformulaVersion, sandbox });
+ return buildJavascriptBody({ id, html, js, css, version, hyperformulaVersion, sandbox, lang });
  } else if (/react(-.*)?/.test(preset)) {
  return buildReactBody({ js, css, version, hyperformulaVersion, preset, sandbox });
  } else if (/vue3(-.*)?/.test(preset)) {

diff --git a/docs/.vuepress/containers/examples/codesandbox.js b/docs/.vuepress/containers/examples/codesandbox.js
@@ -1,8 +1,8 @@
 const { getParameters } = require('codesandbox/lib/api/define');
 const { getBody } = require('../../code-structure-builder/getBody');
 
-const codesandbox = (id, html, js, css, docsVersion, preset) => {
- const body = getBody(id, html, js, css, docsVersion, preset);
+const codesandbox = (id, html, js, css, docsVersion, preset, lang) => {
+ const body = getBody({ id, html, js, css, docsVersion, preset, lang });
  const parameters = getParameters(body);
 
  return `

diff --git a/docs/.vuepress/containers/examples/examples.js b/docs/.vuepress/containers/examples/examples.js
@@ -1,10 +1,10 @@
 /**
- * Matches into: `example #ID .class :preset --css 2 --html 0 --js 1 --no-edit`.
+ * Matches into: `example #ID .class :preset --css 2 --html 0 --js 1 --ts 3 --no-edit`.
  *
  * @type {RegExp}
  */
 const EXAMPLE_REGEX = /^(example)\s*(#\S*|)\s*(\.\S*|)\s*(:\S*|)\s*([\S|\s]*)$/;
-
+const Token = require('markdown-it/lib/token');
 const { buildCode } = require('./code-builder');
 const { addCodeForPreset } = require('./add-code-for-preset');
 const { codesandbox } = require('./codesandbox');
@@ -14,45 +14,84 @@ const { stackblitz } = require('./stackblitz');
 const tab = (tabName, token, id) => {
  if (!token) return [];
 
+ const openTSDivToken = new Token('html_block', '', 1);
+ const closeDivToken = new Token('html_block', '', -1);
+
+ openTSDivToken.content = `<tab id="${tabName.toLowerCase()}-tab-${id}" name="${tabName}">`;
+ closeDivToken.content = '</tab>';
+
  return [
- {
- type: 'html_block',
- tag: '',
- attrs: null,
- map: [],
- nesting: 0,
- level: 1,
- children: null,
- content: `<tab id="${tabName.toLowerCase()}-tab-${id}" name="${tabName}">`,
- markup: '',
- info: '',
- meta: null,
- block: true,
- hidden: false,
- },
+ openTSDivToken,
  token,
- {
- type: 'html_block',
- tag: '',
- attrs: null,
- map: [],
- nesting: 0,
- level: 1,
- children: null,
- content: '</tab>',
- markup: '',
- info: '',
- meta: null,
- block: true,
- hidden: false,
- },
+ closeDivToken
  ];
 };
 
+const parsePreview = (content, base) => {
+ if (!content) return '';
+
+ return content
+ .replaceAll('{{$basePath}}', base)
+ // Remove the all "/* start:skip-in-compilation */" and "/* end:skip-in-compilation */" comments
+ .replace(/\/\*(\s+)?(start|end):skip-in-compilation(\s+)?\*\/\n/gm, '')
+ // Remove the code between "/* start:skip-in-preview */" and "/* end:skip-in-preview */" expressions
+ .replace(/\/\*(\s+)?start:skip-in-preview(\s+)?\*\/\n.*?\/\*(\s+)?end:skip-in-preview(\s+)?\*\/\n/msg, '')
+ // Remove /* end-file */
+ .replace(/\/\* end-file \*\//gm, '')
+ .trim();
+};
+
+const parseCode = (content) => {
+ if (!content) return '';
+
+ return content
+ // Remove the all "/* start:skip-in-preview */" and "/* end:skip-in-preview */" comments
+ .replace(/\/\*(\s+)?(start|end):skip-in-preview(\s+)?\*\/\n/gm, '')
+ // Remove the code between "/* start:skip-in-compilation */" and "/* end:skip-in-compilation */" expressions
+ // eslint-disable-next-line max-len
+ .replace(/\/\*(\s+)?start:skip-in-compilation(\s+)?\*\/\n.*?\/\*(\s+)?end:skip-in-compilation(\s+)?\*\/\n/msg, '')
+ // Remove /* end-file */
+ .replace(/\/\* end-file \*\//gm, '');
+};
+
+const parseCodeSandbox = (content) => {
+ if (!content) return '';
+
+ return content
+ // Remove the all "/* start:skip-in-preview */" and "/* end:skip-in-preview */" comments
+ .replace(/\/\*(\s+)?(start|end):skip-in-preview(\s+)?\*\/\n/gm, '')
+ // Remove the all "/* start:skip-in-compilation */" and "/* end:skip-in-compilation */" comments
+ .replace(/\/\*(\s+)?(start|end):skip-in-compilation(\s+)?\*\/\n/gm, '');
+};
+
+const getCodeToken = (jsToken, tsToken) => {
+ const code = new Token('inline', '', 1);
+ const openJSDivToken = new Token('container_div_open', 'div', 1);
+ const openTSDivToken = new Token('container_div_open', 'div', 1);
+ const closeDivToken = new Token('container_div_close', 'div', -1);
+
+ openJSDivToken.attrSet('class', 'tab-content-js hideElement');
+ openTSDivToken.attrSet('class', 'tab-content-ts');
+
+ code.children = [
+ openJSDivToken,
+ jsToken,
+ closeDivToken
+ ];
+
+ if (tsToken) {
+ code.children.push(openTSDivToken);
+ code.children.push(tsToken);
+ code.children.push(closeDivToken);
+ }
+
+ return code;
+};
+
 module.exports = function(docsVersion, base) {
  return {
  type: 'example',
- render(tokens, index, opts, env) {
+ render(tokens, index, _opts, env) {
  const token = tokens[index];
  const m = token.info.trim().match(EXAMPLE_REGEX);
 
@@ -79,72 +118,54 @@ module.exports = function(docsVersion, base) {
  const cssContent = cssToken ? cssToken.content : '';
 
  const jsPos = args.match(/--js (\d*)/)?.[1] || 1;
- const jsIndex = index + Number.parseInt(jsPos, 10);
- const jsToken = tokens[jsIndex];
-
- jsToken.content = jsToken.content.replaceAll('{{$basePath}}', base);
-
- const codeToCompile = jsToken.content
- // Remove the all "/* start:skip-in-preview */" and "/* end:skip-in-preview */" comments
- .replace(/\/\*(\s+)?(start|end):skip-in-preview(\s+)?\*\/\n/gm, '')
- // Remove the code between "/* start:skip-in-compilation */" and "/* end:skip-in-compilation */" expressions
- // eslint-disable-next-line max-len
- .replace(/\/\*(\s+)?start:skip-in-compilation(\s+)?\*\/\n.*?\/\*(\s+)?end:skip-in-compilation(\s+)?\*\/\n/msg, '')
- // Remove /* end-file */
- .replace(/\/\* end-file \*\//gm, '');
-
- const codeToPreview = jsToken.content
- // Remove the all "/* start:skip-in-compilation */" and "/* end:skip-in-compilation */" comments
- .replace(/\/\*(\s+)?(start|end):skip-in-compilation(\s+)?\*\/\n/gm, '')
- // Remove the code between "/* start:skip-in-preview */" and "/* end:skip-in-preview */" expressions
- .replace(/\/\*(\s+)?start:skip-in-preview(\s+)?\*\/\n.*?\/\*(\s+)?end:skip-in-preview(\s+)?\*\/\n/msg, '')
- // Remove /* end-file */
- .replace(/\/\* end-file \*\//gm, '')
- .trim();
-
- const codeToCompileSandbox = jsToken.content
- // Remove the all "/* start:skip-in-preview */" and "/* end:skip-in-preview */" comments
- .replace(/\/\*(\s+)?(start|end):skip-in-preview(\s+)?\*\/\n/gm, '')
- // Remove the all "/* start:skip-in-compilation */" and "/* end:skip-in-compilation */" comments
- .replace(/\/\*(\s+)?(start|end):skip-in-compilation(\s+)?\*\/\n/gm, '');
-
- jsToken.content = codeToPreview;
+ const jsIndex = jsPos ? index + Number.parseInt(jsPos, 10) : 0;
+ const jsToken = jsPos ? tokens[jsIndex] : undefined;
 
- const activeTab = `${args.match(/--tab (code|html|css|preview)/)?.[1] ?? 'preview'}-tab-${id}`;
- const noEdit = !!args.match(/--no-edit/)?.[0];
+ const tsPos = args.match(/--ts (\d*)/)?.[1];
+ const tsIndex = tsPos ? index + Number.parseInt(tsPos, 10) : 0;
+ const tsToken = tsPos ? tokens[tsIndex] : undefined;
 
- const codeForPreset = addCodeForPreset(codeToCompile, preset, id);
+ // Parse code
+ const codeToCompile = parseCode(jsToken.content);
+ const tsCodeToCompile = parseCode(tsToken?.content);
+ const codeToCompileSandbox = parseCodeSandbox(jsToken.content);
+ const tsCodeToCompileSandbox = parseCodeSandbox(tsToken?.content);
+ const codeToPreview = parsePreview(jsToken.content, base);
+ const tsCodeToPreview = parsePreview(tsToken?.content, base);
 
- const code = buildCode(
- id + (preset.includes('angular') ? '.ts' : '.jsx'),
- codeForPreset,
- env.relativePath
- );
- const encodedCode = encodeURI(
- `useHandsontable('${docsVersion}', function(){${code}}, '${preset}')`
- );
+ // Replace token content
+ if (jsToken) jsToken.content = codeToPreview;
+
+ if (tsToken) tsToken.content = tsCodeToPreview;
 
- [htmlIndex, jsIndex, cssIndex].filter(x => !!x).sort().reverse().forEach((x) => {
+ [htmlIndex, jsIndex, tsIndex, cssIndex].filter(x => !!x).sort().reverse().forEach((x) => {
  tokens.splice(x, 1);
  });
 
  const newTokens = [
- ...tab('Code', jsToken, id),
+ ...tab('Code', tsToken ? getCodeToken(jsToken, tsToken) : jsToken, id),
  ...tab('HTML', htmlToken, id),
  ...tab('CSS', cssToken, id),
  ];
 
  tokens.splice(index + 1, 0, ...newTokens);
- const isAngular = /angular(-.*)?/.test(preset);
- const isRTL = /layoutDirection(.*)'rtl'/.test(codeToCompile) || /dir="rtl"/.test(htmlContent);
- const isReact = /react(-.*)?/.test(preset);
-
- const displayJsFiddle = Boolean(!noEdit && !isAngular);
 
+ const codeForPreset = addCodeForPreset(codeToCompile, preset, id);
+ const code = buildCode(
+ id + (preset.includes('angular') ? '.ts' : '.jsx'),
+ codeForPreset,
+ env.relativePath
+ );
+ const encodedCode = encodeURI(
+ `useHandsontable('${docsVersion}', function(){${code}}, '${preset}')`
+ );
+ const activeTab = `${args.match(/--tab (code|html|css|preview)/)?.[1] ?? 'preview'}-tab-${id}`;
+ const noEdit = !!args.match(/--no-edit/)?.[0];
+ const isRTL = /layoutDirection(.*)'rtl'/.test(codeToCompile) || /dir="rtl"/.test(htmlContent);
  const isActive = `$parent.$parent.isScriptLoaderActivated('${id}')`;
 
  return `
- <div class="example-container" >
+ <div class="example-container">
  <template v-if="${isActive}">
  <style v-pre>${cssContent}</style>
  <div v-pre>${htmlContentRoot}</div>
@@ -157,31 +178,41 @@ module.exports = function(docsVersion, base) {
  <i class="ico i-code"></i>Source code
  </button>
  <div class="example-controls">
- ${Boolean(!noEdit) && stackblitz(
- id,
- htmlContent,
- codeToCompileSandbox,
- cssContent,
- docsVersion,
- preset
- )}
- ${!noEdit && !isReact
- ? codesandbox(
- id,
- htmlContent,
- codeToCompileSandbox,
- cssContent,
- docsVersion,
- preset
- ) : ''}
- ${displayJsFiddle ? jsfiddle(id, htmlContent, codeForPreset, cssContent, docsVersion, preset) : ''}
- <button 
+ <div class="examples-buttons examples-js${tsToken ? ' hideElement' : ''}">
+ ${!noEdit
+ ? stackblitz(id, htmlContent, codeToCompileSandbox, cssContent, docsVersion, preset, 'js')
+ : ''}
+ ${!noEdit
+ ? codesandbox(id, htmlContent, codeToCompileSandbox, cssContent, docsVersion, preset, 'js')
+ : ''}
+ ${!noEdit
+ ? jsfiddle(id, htmlContent, codeForPreset, cssContent, docsVersion, preset, 'js')
+ : ''}
+ </div>
+ ${tsToken ? `
+ <div class="examples-buttons examples-ts">
+ ${!noEdit
+ ? stackblitz(id, htmlContent, tsCodeToCompileSandbox, cssContent, docsVersion, preset, 'ts')
+ : ''}
+ ${!noEdit
+ ? codesandbox(id, htmlContent, tsCodeToCompileSandbox, cssContent, docsVersion, preset, 'ts')
+ : ''}
+ ${!noEdit
+ ? jsfiddle(id, htmlContent, tsCodeToCompile, cssContent, docsVersion, preset, 'ts')
+ : ''}
+ </div>
+ ` : ''}
+ <button
  aria-label="Reset the demo" 
  @click="$parent.$parent.resetDemo('${id}')" 
  :disabled="$parent.$parent.isButtonInactive"
  >
  <i class="ico i-refresh"></i>
  </button>
+ <select class="selected-lang" value="ts" hidden>
+ <option value="ts">ts</option>
+ <option value="js">js</option>
+ </select>
  </div>
  </div>
  <div class="example-container-code">

diff --git a/docs/.vuepress/containers/examples/jsfiddle.js b/docs/.vuepress/containers/examples/jsfiddle.js
@@ -3,7 +3,7 @@ const JSFIDDLE_ENDPOINT = 'https://jsfiddle.net/api/post/library/pure/';
 
 const { getDependencies } = require('../../handsontable-manager');
 
-const jsfiddle = (id, html, code, css, version, preset) => {
+const jsfiddle = (_id, html, code, css, version, preset, lang) => {
  const isBabelPanel = preset.includes('react') || preset.includes('vue') || preset.includes('hot');
  const isAngularPanel = preset.includes('angular');
  const imports = getDependencies(version, preset).reduce(
@@ -29,8 +29,8 @@ ${html}
  </textarea>
  <textarea class="hidden" name="css" readOnly v-pre>${css}</textarea>
  <input type="hidden" name="panel_css" value="1" readOnly> <!-- enables SCSS panel -->
- ${isBabelPanel ? '<input type="hidden" name="panel_js" value="3" readOnly>' : ''}
- ${isAngularPanel ? '<input type="hidden" name="panel_js" value="4" readOnly>' : ''}
+ ${isBabelPanel && lang === 'js' ? '<input type="hidden" name="panel_js" value="3" readOnly>' : ''}
+ ${isAngularPanel || lang === 'ts' ? '<input type="hidden" name="panel_js" value="4" readOnly>' : ''}
 
  <div class="js-fiddle-link">
  <button type="submit" aria-label="Edit in JSFiddle">

diff --git a/docs/.vuepress/containers/examples/stackblitz.js b/docs/.vuepress/containers/examples/stackblitz.js
@@ -1,7 +1,7 @@
 const { getBody } = require('../../code-structure-builder/getBody');
 
-const stackblitz = (id, html, js, css, docsVersion, preset) => {
- const body = getBody(id, html, js, css, docsVersion, preset, 'stackblitz');
+const stackblitz = (id, html, js, css, docsVersion, preset, lang) => {
+ const body = getBody({ id, html, js, css, docsVersion, preset, sandbox: 'stackblitz', lang });
 
  const projects = body?.files
  ? Object.entries(body?.files).map(([key, value]) => (
@@ -16,7 +16,9 @@ const stackblitz = (id, html, js, css, docsVersion, preset) => {
  const getTemplate = () => {
  if (preset.includes('react')) return 'create-react-app';
 
- if (preset.includes('hot')) return 'javascript';
+ if (preset.includes('hot') && lang === 'js') return 'javascript';
+
+ if (preset.includes('hot') && lang === 'ts') return 'typescript';
 
  return 'node';
  };