pragmate-ui/code/code.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'pragmate-ui/icons';
import * as dependency_3 from 'react';
import * as dependency_4 from 'prismjs';
import * as dependency_5 from 'pragmate-ui/toast';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/code"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['pragmate-ui/icons', dependency_2],['react', dependency_3],['prismjs', dependency_4],['pragmate-ui/toast', dependency_5]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/code')


const ims = new Map();

/***************************
INTERNAL MODULE: ./clipboard
***************************/

ims.set('./clipboard', {hash: 1917992420, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Clipboard = Clipboard;
var _icons = require("pragmate-ui/icons");
var _react = require("react");
var _useClick = require("./use-click");
function Clipboard({
  text
}) {
  const [ref, onClick] = (0, _useClick.useClick)();
  return _react.default.createElement("div", {
    className: 'clipboard__container',
    "data-text": text,
    ref: ref,
    onClick: onClick
  }, _react.default.createElement(_icons.IconButton, {
    title: 'copy',
    icon: 'copy'
  }), _react.default.createElement("span", {
    className: 'action-copied'
  }, "Copied"));
}
}});

/**************************
INTERNAL MODULE: ./code-box
**************************/

ims.set('./code-box', {hash: 2123332791, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CodeBox = CodeBox;
var _react = require("react");
var _code = require("./code");
var _clipboard = require("./clipboard");
/*bundle*/function CodeBox({
  title,
  language,
  children
}) {
  return _react.default.createElement("div", {
    className: 'code__box'
  }, _react.default.createElement("header", null, _react.default.createElement("div", {
    className: 'tab active'
  }, title), _react.default.createElement(_clipboard.Clipboard, {
    text: children
  })), _react.default.createElement("section", {
    className: 'box__code'
  }, _react.default.createElement(_code.Code, {
    language: language,
    clipboard: false
  }, children)));
}
}});

/**********************
INTERNAL MODULE: ./code
**********************/

ims.set('./code', {hash: 1110291450, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Code = Code;
var _react = require("react");
var Prism = require("prismjs");
var _clipboard = require("./clipboard");
/*bundle*/function Code({
  language = 'typescript',
  children,
  clipboard = true
}) {
  const createMarkup = () => {
    if (!children) {
      return {
        __html: ''
      };
    }
    const html = Prism.highlight(children, Prism.languages.javascript, language);
    return {
      __html: html
    };
  };
  const cls = `code-container${clipboard ? ' has-clipboard' : ''}`;
  return _react.default.createElement("div", {
    className: cls
  }, _react.default.createElement("pre", {
    className: `regular__code language-${language}`,
    dangerouslySetInnerHTML: createMarkup()
  }), clipboard && _react.default.createElement(_clipboard.Clipboard, {
    text: children
  }));
}
}});

/************************
INTERNAL MODULE: ./inline
************************/

ims.set('./inline', {hash: 1462049212, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InlineCode = InlineCode;
var _react = require("react");
/*bundle*/function InlineCode({
  children
}) {
  return _react.default.createElement("code", {
    className: "inline__code"
  }, children);
}
}});

/***************************
INTERNAL MODULE: ./use-click
***************************/

ims.set('./use-click', {hash: 3962409993, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useClick = useClick;
var _react = require("react");
var _toast = require("pragmate-ui/toast");
function useClick() {
  const ref = _react.default.useRef(null);
  const polyfill = text => {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    // Avoid scrolling to bottom
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.position = 'fixed';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const successful = document.execCommand('copy');
      const msg = successful ? 'successful' : 'unsuccessful';
      console.log('Fallback: Copying text command was ' + msg);
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    }
  };
  const onClick = async event => {
    const target = event.currentTarget;
    _toast.toast.info('copied');
    const text = target.dataset.text;
    if (!navigator.clipboard) {
      return polyfill(text);
    }
    try {
      await navigator.clipboard.writeText(text);
      const span = ref.current.querySelector('.action-copied');
      span.classList.add('show');
      window.setTimeout(() => {
        span.classList.add('hide');
        window.setTimeout(() => span.classList.remove('show', 'hide'), 300);
      }, 500);
    } catch (e) {
      console.log('some error', e);
    }
  };
  return [ref, onClick];
}
}});

__pkg.exports.descriptor = [{"im":"./code-box","from":"CodeBox","name":"CodeBox"},{"im":"./code","from":"Code","name":"Code"},{"im":"./inline","from":"InlineCode","name":"InlineCode"}];

export let CodeBox, Code, InlineCode;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'CodeBox') && (CodeBox = require ? require('./code-box').CodeBox : value);
    (require || prop === 'Code') && (Code = require ? require('./code').Code : value);
    (require || prop === 'InlineCode') && (InlineCode = require ? require('./inline').InlineCode : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=code.browser.mjs.map