Контекст о том, что я хочу сделать
Я пытаюсь сделать что-то похожее на https://codesandbox.io/s/vanilla или https://jsfiddle.net веб-приложение, сайт, где люди могут кодировать свои собственные маленькие статические страницы, поддерживающие html, css и vanilla javascript. У меня есть текстовый редактор в браузере, где пользователь будет кодировать статическую страницу с html/css/js, у меня также есть независимый компонент GUI для управления деревом файлов, текстовые данные в файлах сохраняются в localstorage с именами в соответствии с их фиктивным path в компоненте дерева файлов.
Пользователь должен иметь возможность запускать свой код и видеть визуализацию приложения внутри <iframe>, и в настоящее время я могу отобразить файл html внутри этого <iframe>, взяв содержимое одного файла (строку) и создание URL, который я могу передать <iframe> с URL.createObjectURL()
проблема
Однако я не знаю, как отобразить страницу html/js/css, если пользователь решит закодировать свою статическую страницу, используя несколько файлов, потому что я не знаю, как разрешить пути href/require/include/src/etc, помещенные в файлы. Если файлы были сохранены на ПК пользователя, он может просто открыть их из своего файлового менеджера, и ПК / браузер определит пути, однако это не так, как работает localstorage/indexeddb/cache API. И вариант, который у меня остался - это объединить его файлы в одну страницу перед рендерингом внутри <iframe>, что-то похожее на Webpack, за исключением того, что мне придется делать это динамически на стороне клиента.
Как мне это сделать?
Другой вариант, о котором я подумал, - это написать свой собственный пакет и разобрать
файлы для операторов import и замена их на
URL.createObjectURL() s, что <iframe> поймет, но
что кажется подверженным ошибкам и трудным