Reactjs 代码沙盒“；编辑预览"；不适用于Aurelia，但适用于其他框架和普通HTML_Reactjs_Aurelia_Codesandbox

Reactjs 代码沙盒“；编辑预览"；不适用于Aurelia，但适用于其他框架和普通HTML

reactjs aurelia

Reactjs 代码沙盒“；编辑预览"；不适用于Aurelia，但适用于其他框架和普通HTML,reactjs,aurelia,codesandbox,Reactjs,Aurelia,Codesandbox,我正在使用Codesandbox创建示例，在一个新项目中，我们正在使用框架Aurelia。我可以让Aurelia在Codesandbox上运行，但我无法让编辑时的预览工作。我尝试添加一个sandbox.config.json，将更改时硬重新加载设置为true，但没有帮助。这不是一个交易破坏者，但当你习惯于看到你的编辑立即是恼人的。我认为问题在于所使用的模板是静态的，但是Codesandbox不提供Aurelia模板。有人解决了这个问题吗 Aurelia代码示例，请参见文件app.html：普

我正在使用

Codesandbox

创建示例，在一个新项目中，我们正在使用框架

Aurelia

。我可以让Aurelia在

Codesandbox

上运行，但我无法让编辑时的

预览工作。我尝试添加一个sandbox.config.json
，将更改时硬重新加载设置为true，但没有帮助。这不是一个交易破坏者，但当你习惯于看到你的编辑立即是恼人的。我认为问题在于所使用的模板
是静态的
，但是Codesandbox
不提供Aurelia模板。有人解决了这个问题吗
Aurelia代码示例，请参见文件app.html
：

普通HTML，请参见文件index.HTML
：

请参见文件index.tsx
：

代码：
index.html：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aurelia App</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>

<body style='font-family:arial'>
  <script src='https://unpkg.com/aurelia-script@1.3.0'></script>
    </script>
    <script>
        const aurelia = new au.Aurelia();
      aurelia
        .use
          .standardConfiguration()
          .developmentLogging();
      aurelia
        .start()
        .then(() => aurelia.setRoot('app.js', document.body))
        .catch(ex => {
          document.body.textContent = `Bootstrap error: ${ex.toString()}`;
        });
    </script>
</body>
</html>

app.html：
<template>
  <div class="jumbotron mb-0"><h1>${message}</h1></div>
  <div class="d-flex">Preview does not work here 1</div>
</template>


${message}
预览在此处不起作用1
使用Aurelia Framework 1.3.0的工作示例：
app.html
<template>
  <h1>${message}</h1>
</template>

index.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Aurelia App</title>
</head>

<body>
</body>

</html>

codesandbox.js
import "aurelia-polyfills";
import { initialize } from "aurelia-pal-browser";
import { Aurelia } from "aurelia-framework";
import { Origin } from "aurelia-metadata";
import { Loader, TemplateRegistryEntry, LoaderPlugin } from "aurelia-loader";
import { DOM, PLATFORM } from "aurelia-pal";
import { join } from "aurelia-path";

// IMPORTANT
// The code in this file is not needed in a real Aurelia app.
// It is only needed to configure CodeSandbox.io for Aurelia.
// Aurelia application code begins in the src/main.ts file.
// ORIGINAL AUTHOR: Bazyli Brzóska https://github.com/niieani

class TextTemplateLoader {
  async loadTemplate(loader, entry) {
    const text = await loader.loadText(entry.address);
    entry.template = DOM.createTemplateFromMarkup(text);
  }
}

function ensureOriginOnExports(moduleExports, moduleId) {
  let target = moduleExports;
  let key;
  let exportedValue;

  if (!moduleExports) {
    return moduleExports;
  }

  if (target.__useDefault) {
    target = target.default;
  }

  Origin.set(target, new Origin(moduleId, "default"));

  if (typeof target === "object") {
    for (key in target) {
      exportedValue = target[key];

      if (typeof exportedValue === "function") {
        Origin.set(exportedValue, new Origin(moduleId, key));
      }
    }
  }

  return moduleExports;
}

async function getModule(moduleName) {
  // if (moduleName.includes("/")) {
  //   moduleName = join("src", moduleName);
  // }

  const hasJS = moduleName.endsWith(".js");

  try {
    return await import(`${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  try {
    return await import(`./${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  try {
    return await import(`${moduleName}/dist/amd/${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  try {
    return await import(`./${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  if (moduleName.includes("/")) {
    try {
      const [dep, ...path] = moduleName.split("/");
      return import(`${dep}/dist/amd/${path.join(
        "/"
      )}` /* webpackMode: 'eager' */);
    } catch (e) {}
  }

  if (!hasJS) {
    return await getModule(`${moduleName}.js`);
  }
}

class SandboxLoader extends Loader {
  moduleRegistry = Object.create(null);
  loaderPlugins = Object.create(null);
  modulesBeingLoaded = new Map();

  templateLoader: TextTemplateLoader;

  constructor() {
    super();

    this.useTemplateLoader(new TextTemplateLoader());
    this.addPlugin("template-registry-entry", {
      fetch: async moduleId => {
        const entry = this.getOrCreateTemplateRegistryEntry(moduleId);
        if (!entry.templateIsLoaded) {
          await this.templateLoader.loadTemplate(this, entry);
        }
        return entry;
      }
    });
  }

  async _import(address, defaultHMR = true) {
    const addressParts = address.split("!");
    const moduleId = addressParts.splice(addressParts.length - 1, 1)[0];
    const loaderPlugin = addressParts.length === 1 ? addressParts[0] : null;

    if (loaderPlugin) {
      const plugin = this.loaderPlugins[loaderPlugin];
      if (!plugin) {
        throw new Error(
          `Plugin ${loaderPlugin} is not registered in the loader.`
        );
      }
      return await plugin.fetch(moduleId);
    }

    const m = await getModule(moduleId);
    return m;
  }

  map(id, source) {}

  normalizeSync(moduleId, relativeTo) {
    return moduleId;
  }

  normalize(moduleId, relativeTo) {
    return Promise.resolve(moduleId);
  }

  useTemplateLoader(templateLoader) {
    this.templateLoader = templateLoader;
  }

  loadAllModules(ids) {
    return Promise.all(ids.map(id => this.loadModule(id)));
  }

  async loadModule(moduleId, defaultHMR = true) {
    let existing = this.moduleRegistry[moduleId];
    if (existing) {
      return existing;
    }
    let beingLoaded = this.modulesBeingLoaded.get(moduleId);
    if (beingLoaded) {
      return beingLoaded;
    }
    beingLoaded = this._import(moduleId, defaultHMR);
    this.modulesBeingLoaded.set(moduleId, beingLoaded);
    const moduleExports = await beingLoaded;
    this.moduleRegistry[moduleId] = ensureOriginOnExports(
      moduleExports,
      moduleId
    );
    this.modulesBeingLoaded.delete(moduleId);
    return moduleExports;
  }

  loadTemplate(url) {
    return this.loadModule(
      this.applyPluginToUrl(url, "template-registry-entry"),
      false
    );
  }

  async loadText(url) {
    const result = await this.loadModule(url, false);
    if (result.default && "string" == typeof result.default) {
      // we're dealing with a file loaded using the css-loader:
      return result.default;
    }
    return result;
  }

  applyPluginToUrl(url, pluginName) {
    return `${pluginName}!${url}`;
  }

  addPlugin(pluginName, implementation) {
    this.loaderPlugins[pluginName] = implementation;
  }
}

(async () => {
  try {
    initialize();
    const aurelia = new Aurelia(new SandboxLoader());
    await getModule("./main").then(m => m.configure(aurelia));
  } catch (ex) {
    console.error(ex);
    document.body.textContent = ex;
  }
})();

package.json
{
  "name": "a-simple-component",
  "version": "1.0.0",
  "private": true,
  "keywords": [],
  "description": "An Aurelia application that shows how to build a simple component.",
  "main": "codesandbox.js",
  "dependencies": {
    "aurelia-event-aggregator": "1.0.1",
    "aurelia-framework": "1.3.0",
    "aurelia-history-browser": "1.2.0",
    "aurelia-loader": "1.0.0",
    "aurelia-logging": "1.5.0",
    "aurelia-logging-console": "1.0.0",
    "aurelia-metadata": "1.0.4",
    "aurelia-pal": "1.8.0",
    "aurelia-pal-browser": "1.8.0",
    "aurelia-polyfills": "1.3.0",
    "aurelia-router": "1.6.3",
    "aurelia-templating": "1.10.1",
    "aurelia-templating-binding": "1.5.2",
    "aurelia-templating-resources": "1.7.1",
    "aurelia-templating-router": "1.3.3"
  }
}


Aurelia Framework 1.0.7的示例：
寻求调试帮助的问题必须包含在问题本身中重现该问题所需的最短代码。链接到第三方网站是不够的，因为链接会失效，并且会使您的问题和答案变得毫无意义。@Rob True，但是这个问题是针对第三方网站的，而不是实际的代码本身。我现在已经添加了代码，但为了回答这个问题，它必须通过Codesandbox运行。我最近创建了一个，它工作正常。（在我完成键入后几秒钟预览就会更新）-也许你可以分叉一个现有项目，并用你的内容替换它？@avrahamcool那太好了：）
import { Aurelia } from "aurelia-framework";

export async function configure(aurelia) {
  aurelia.use.standardConfiguration().developmentLogging();

  await aurelia
    .start()
    .then(a => a.setRoot("app", document.body))
    .catch(ex => {
      document.body.textContent = `Bootstrap error: ${ex}`;
    });
}

import "aurelia-polyfills";
import { initialize } from "aurelia-pal-browser";
import { Aurelia } from "aurelia-framework";
import { Origin } from "aurelia-metadata";
import { Loader, TemplateRegistryEntry, LoaderPlugin } from "aurelia-loader";
import { DOM, PLATFORM } from "aurelia-pal";
import { join } from "aurelia-path";

// IMPORTANT
// The code in this file is not needed in a real Aurelia app.
// It is only needed to configure CodeSandbox.io for Aurelia.
// Aurelia application code begins in the src/main.ts file.
// ORIGINAL AUTHOR: Bazyli Brzóska https://github.com/niieani

class TextTemplateLoader {
  async loadTemplate(loader, entry) {
    const text = await loader.loadText(entry.address);
    entry.template = DOM.createTemplateFromMarkup(text);
  }
}

function ensureOriginOnExports(moduleExports, moduleId) {
  let target = moduleExports;
  let key;
  let exportedValue;

  if (!moduleExports) {
    return moduleExports;
  }

  if (target.__useDefault) {
    target = target.default;
  }

  Origin.set(target, new Origin(moduleId, "default"));

  if (typeof target === "object") {
    for (key in target) {
      exportedValue = target[key];

      if (typeof exportedValue === "function") {
        Origin.set(exportedValue, new Origin(moduleId, key));
      }
    }
  }

  return moduleExports;
}

async function getModule(moduleName) {
  // if (moduleName.includes("/")) {
  //   moduleName = join("src", moduleName);
  // }

  const hasJS = moduleName.endsWith(".js");

  try {
    return await import(`${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  try {
    return await import(`./${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  try {
    return await import(`${moduleName}/dist/amd/${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  try {
    return await import(`./${moduleName}` /* webpackMode: 'eager' */);
  } catch (e) {}

  if (moduleName.includes("/")) {
    try {
      const [dep, ...path] = moduleName.split("/");
      return import(`${dep}/dist/amd/${path.join(
        "/"
      )}` /* webpackMode: 'eager' */);
    } catch (e) {}
  }

  if (!hasJS) {
    return await getModule(`${moduleName}.js`);
  }
}

class SandboxLoader extends Loader {
  moduleRegistry = Object.create(null);
  loaderPlugins = Object.create(null);
  modulesBeingLoaded = new Map();

  templateLoader: TextTemplateLoader;

  constructor() {
    super();

    this.useTemplateLoader(new TextTemplateLoader());
    this.addPlugin("template-registry-entry", {
      fetch: async moduleId => {
        const entry = this.getOrCreateTemplateRegistryEntry(moduleId);
        if (!entry.templateIsLoaded) {
          await this.templateLoader.loadTemplate(this, entry);
        }
        return entry;
      }
    });
  }

  async _import(address, defaultHMR = true) {
    const addressParts = address.split("!");
    const moduleId = addressParts.splice(addressParts.length - 1, 1)[0];
    const loaderPlugin = addressParts.length === 1 ? addressParts[0] : null;

    if (loaderPlugin) {
      const plugin = this.loaderPlugins[loaderPlugin];
      if (!plugin) {
        throw new Error(
          `Plugin ${loaderPlugin} is not registered in the loader.`
        );
      }
      return await plugin.fetch(moduleId);
    }

    const m = await getModule(moduleId);
    return m;
  }

  map(id, source) {}

  normalizeSync(moduleId, relativeTo) {
    return moduleId;
  }

  normalize(moduleId, relativeTo) {
    return Promise.resolve(moduleId);
  }

  useTemplateLoader(templateLoader) {
    this.templateLoader = templateLoader;
  }

  loadAllModules(ids) {
    return Promise.all(ids.map(id => this.loadModule(id)));
  }

  async loadModule(moduleId, defaultHMR = true) {
    let existing = this.moduleRegistry[moduleId];
    if (existing) {
      return existing;
    }
    let beingLoaded = this.modulesBeingLoaded.get(moduleId);
    if (beingLoaded) {
      return beingLoaded;
    }
    beingLoaded = this._import(moduleId, defaultHMR);
    this.modulesBeingLoaded.set(moduleId, beingLoaded);
    const moduleExports = await beingLoaded;
    this.moduleRegistry[moduleId] = ensureOriginOnExports(
      moduleExports,
      moduleId
    );
    this.modulesBeingLoaded.delete(moduleId);
    return moduleExports;
  }

  loadTemplate(url) {
    return this.loadModule(
      this.applyPluginToUrl(url, "template-registry-entry"),
      false
    );
  }

  async loadText(url) {
    const result = await this.loadModule(url, false);
    if (result.default && "string" == typeof result.default) {
      // we're dealing with a file loaded using the css-loader:
      return result.default;
    }
    return result;
  }

  applyPluginToUrl(url, pluginName) {
    return `${pluginName}!${url}`;
  }

  addPlugin(pluginName, implementation) {
    this.loaderPlugins[pluginName] = implementation;
  }
}

(async () => {
  try {
    initialize();
    const aurelia = new Aurelia(new SandboxLoader());
    await getModule("./main").then(m => m.configure(aurelia));
  } catch (ex) {
    console.error(ex);
    document.body.textContent = ex;
  }
})();

{
  "name": "a-simple-component",
  "version": "1.0.0",
  "private": true,
  "keywords": [],
  "description": "An Aurelia application that shows how to build a simple component.",
  "main": "codesandbox.js",
  "dependencies": {
    "aurelia-event-aggregator": "1.0.1",
    "aurelia-framework": "1.3.0",
    "aurelia-history-browser": "1.2.0",
    "aurelia-loader": "1.0.0",
    "aurelia-logging": "1.5.0",
    "aurelia-logging-console": "1.0.0",
    "aurelia-metadata": "1.0.4",
    "aurelia-pal": "1.8.0",
    "aurelia-pal-browser": "1.8.0",
    "aurelia-polyfills": "1.3.0",
    "aurelia-router": "1.6.3",
    "aurelia-templating": "1.10.1",
    "aurelia-templating-binding": "1.5.2",
    "aurelia-templating-resources": "1.7.1",
    "aurelia-templating-router": "1.3.3"
  }
}