somehow I forgot to push everything important before, because I didn't add it in git

Author: therealadityashankar

dev/index.html

@@ -9,7 +9,7 @@
   <h1>JavaScript</h1>
   <p>JavaScript code example here</p>
   <!-- web component examples go here -->
-  <wc-code mode="javascript" theme="monokai">
+  <wc-code mode="javascript" theme="blackboard">
     <script type="wc-content">
       const resp = await fetch("https://sv443.net/jokeapi/v2/joke/Any?blacklistFlags=nsfw,racist,sexist&format=txt");
       const text = await resp.text();

index.js

@@ -0,0 +1 @@
+import '@vanillawc/wc-codemirror';

index.min.js

@@ -0,0 +1 @@
+import"@vanillawc/wc-codemirror";

src/.wc-code.js.swp

@@ -0,0 +1,53 @@
+// the contains code for the output console
+
+class WCCodeConsole {
+  constructor (wccode) {
+    this.elements = {}
+    this.createDiv(wccode)
+  }
+
+  /**
+   * creates the console div for wc-code
+   *
+   * @param wccode - a wc-code instance
+   */
+  createDiv (wccode) {
+    this.elements.console = document.createElement('div')
+    this.elements.console.classList.add('wc-code-console')
+    this.elements.consoleList = document.createElement('ol')
+
+    this.elements.console.appendChild(this.elements.consoleList)
+    wccode.appendChild(this.elements.console)
+  }
+
+  /**
+   * add an element inside a console,
+   *
+   * this will be put in an 'li' element befor being put inside
+   *
+   * @param el - the HTMLElement to be put inside
+   */
+  addEl (el) {
+    const li = document.createElement('li')
+    li.appendChild(el)
+    this.elements.consoleList.appendChild(li)
+  }
+
+  /**
+   * easy method to put a span element inside the console with some text inside
+   *
+   * @param {String} text - the text to put inside the console
+   */
+  addText (text) {
+    const span = document.createElement('span')
+    span.innerText = text
+    this.addEl(span)
+  }
+
+  /** clear the console **/
+  clear () {
+    this.elements.consoleList.innerText = ''
+  }
+}
+
+export default WCCodeConsole

src/console.js

@@ -0,0 +1,20 @@
+const ModesBaseLoc = 'https://cdn.jsdelivr.net/gh/vanillawc/wc-codemirror@1.8.7/mode/'
+
+/**
+ * these attributes, when loaded, load the
+ * script file for the language dynamically,
+ * as well the code running file
+ */
+export default {
+  metaUrl: import.meta.url,
+  languages: {
+    javascript: {
+      CMLanguageLoc: ModesBaseLoc + 'javascript/javascript.js',
+      languageFile: './languages/javascript.js'
+    },
+    python: {
+      CMLanguageLoc: ModesBaseLoc + 'python/python.js',
+      languageFile: './languages/python.js'
+    }
+  }
+}

src/language-details.js

@@ -0,0 +1,35 @@
+/* eslint no-undef: 0 */
+// we're running javascript in javascript
+// nothing special is required
+WCCode.languages.javascript = {
+  meta: { url: document.currentScript.src },
+  fileExt: ".js",
+  // alternate console for the environment
+  createAlternateConsole (webcomponent) {
+    return {
+      /**
+       * console.log alternative
+       */
+      log (val) {
+        webcomponent.console.addText(val)
+      }
+    }
+  },
+
+  /**
+   * @param webcomponent - the webcomponent
+   */
+  async run (webcomponent) {
+    const code = `return (async function(){
+      const __webcomponent = WCCode.getElement(${webcomponent.WCCodeID})
+      var console = WCCode
+                      .languages
+                      .javascript
+                      .createAlternateConsole(__webcomponent)
+      ${webcomponent.value}
+    })`
+
+    // eslint-disable-next-line
+    await Function(code)()()
+  }
+}

src/languages/javascript.js

@@ -0,0 +1,32 @@
+/* eslint no-undef: 0 */
+// we're running python in javascript,
+// we need pyiodide
+'use strict'
+
+window.languagePluginUrl = 'https://pyodide-cdn2.iodide.io/v0.15.0/full/'
+
+WCCode.languages.python = {
+  meta: { url: document.currentScript.src },
+  fileExt: ".py",
+  additionalScripts: [
+    'https://pyodide-cdn2.iodide.io/v0.15.0/full/pyodide.js'
+  ],
+  async init () {
+    await languagePluginLoader
+    await pyodide.loadPackage(['micropip'])
+  },
+  /**
+   * @param webcomponent - the webcomponent
+   */
+  async run (webcomponent) {
+    pyodide.runPythonAsync(`
+import js as __js
+
+def print(*val):
+  for v in val:
+      wc = __js.WCCode.getElement(${webcomponent.WCCodeID})
+      wc.console.addText(v)
+
+${webcomponent.value}`)
+  }
+}

src/languages/python.js

@@ -0,0 +1,55 @@
+const addedScripts = new Set()
+const addedCSSLinks = new Set()
+
+/**
+ * import a script if we need to import a script,
+ * else don't, useful for language syntax/theme additions,
+ * adding themes, stuff like that
+ */
+export async function addScriptIfRequired (_url, base) {
+  const url = new URL(_url, base)
+  if (addedScripts.has(url.href)) return
+  const script = document.createElement('script')
+  script.src = url.href
+  document.body.appendChild(script)
+
+  await new Promise(resolve => {
+    script.addEventListener('load', resolve)
+  })
+  addedScripts.add(url.href)
+}
+
+/**
+ * add a css link if required
+ */
+export async function addCSSLinkIfRequired (_url, base) {
+  const url = new URL(_url, base)
+  if (addedCSSLinks.has(url.href)) return
+  var link = document.createElement('link')
+  link.setAttribute('rel', 'stylesheet')
+  link.setAttribute('type', 'text/css')
+  link.setAttribute('href', url.href)
+  document.body.appendChild(link)
+  await new Promise(resolve => {
+    link.addEventListener('load', resolve)
+  })
+  addedCSSLinks.add(url.href)
+}
+
+/**
+ * see addScriptIfRequired, this is for multiple scripts
+ */
+export async function addScriptsIfRequired (urls, base) {
+  for (var url of urls) {
+    await addScriptIfRequired(url, base)
+  }
+}
+
+/**
+ * see addCSSLinkIfRequired, this is for multiple links
+ */
+export async function addCSSLinksIfRequired (urls, base) {
+  for (var url of urls) {
+    await addCSSLinkIfRequired(url, base)
+  }
+}

src/utils.js

@@ -0,0 +1,27 @@
+wc-code input[type="button"] {
+	border: 1px solid grey;
+	border-radius: 3px;
+	margin: 5px 5px;
+	padding: 4px 18px;
+  background: white;
+}
+
+
+wc-code .wc-code-console{
+  font-family: monospace;
+}
+
+wc-code .wc-code-loading-bar{
+  font-family: monospace;
+  border-radius: 3px;
+  padding: 5px 10px;
+  color: white;
+}
+
+wc-code .wc-code-loading-bar-loading{
+  background : red;
+}
+
+wc-code .wc-code-loading-bar-done{
+  background : green;
+}