Thanks for sharing your config!
The loaders were helpful to integrate the css. I was able to load the css via import into my test.js file (used in the UI). Unfortunately, the css was not executed in the html. I checked the ui.html in the dist folder and the css from the extra file was there. But with no impact.
To try out another method, I was loading the css by using the HTMLInlineCSSWebpackPlugin in combination with the MiniCssExtractPlugin. The plugins cause that linked css files will be extracted into the html. But even there, the css had no effect on the html. The css test is pretty simple. I have an html text element with the id="test"and the css is coloring the text in red.
Similar experience for the javascript, when loading it into the html. The js code from the extra file is in the compiled ui.html, but gets not executed. For testing purposes, I was setting up a console.log inside and outside a DOMContentLoaded function.
- How do you import script files in UI? One thing about my plugin above is that there are no import statements in UI, everything is imported in the
ui.ts file only and the generated JS file just turns into an inline script in the HTML afterwards.
Interesting, how did you manage to write DOM-related code in your ts file? When I was testing to have the test.jsfile as a typescript file and let it compile to js in the end, typescript was beefing that elements like document are not defined.
Right now, I’m loading the extra js code into the html via webpack by having an extra entry point ui: ['./src/ui/test.js'] and naming it as a chunk in the HtmlWebpackPlugin:
new HtmlWebpackPlugin({
inject: 'body',
template: './src/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui']
})
But as said, the code gets ignored when the plugin runs.
- What does compiled HTML look like in
dist folder? Does it have the imports that you are doing there? Does it have JS script code at all?
The css in the dist/ui.html looks like this
(the css code seems greyed out in Figma’s code preview, but it’s not a comment in VSCode.
<head>
<title></title>
<link rel="stylesheet" href="./ui/styles.css">
<style type="text/css">/*!*********************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./src/ui/styles.css ***!
\*********************************************************************/
#test {
color: red;
}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidWkuY3NzIiwibWFwcGluZ3MiOiI7OztBQUFBO0VBQ0UsVUFBVTtBQUNaLEMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly90ZXN0LWV4cG9ydC0wMi8uL3NyYy91aS9zdHlsZXMuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIiN0ZXN0IHtcbiAgY29sb3I6IHJlZDtcbn0iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=*/</style></head>
<body>
And my test.js code looks like this in the dist/ui.html
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!************************!*\
!*** ./src/ui/test.js ***!
\************************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./styles.css */ "./src/ui/styles.css");
console.log('Hello from test.js');
function logMsg(text) {
console.log(text)
};
// const test = document.getElementById('test');
// console.log('test.js is using ui.html:', test.innerText)
document.addEventListener('DOMContentLoaded', () => {
console.log('Hello from test.js');
const app = document.getElementById('app');
app.innerHTML = '<h1>Hello, Figma Plugin!</h1>';
});
})();
/******/ })()
;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidWkuanMiLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQTs7Ozs7OztVQ0FBO1VBQ0E7O1VBRUE7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7O1VBRUE7VUFDQTs7VUFFQTtVQUNBO1VBQ0E7Ozs7O1dDdEJBO1dBQ0E7V0FDQTtXQUNBLHVEQUF1RCxpQkFBaUI7V0FDeEU7V0FDQSxnREFBZ0QsYUFBYTtXQUM3RDs7Ozs7Ozs7Ozs7O0FDTkE7O0FBRUE7QUFDQTtBQUNBOztBQUVBO0FBQ0E7O0FBRXNCOztBQUV0QjtBQUNBO0FBQ0E7QUFDQTtBQUNBLENBQUMsRSIsInNvdXJjZXMiOlsid2VicGFjazovL3Rlc3QtZXhwb3J0LTAyLy4vc3JjL3VpL3N0eWxlcy5jc3M/ZTcxNSIsIndlYnBhY2s6Ly90ZXN0LWV4cG9ydC0wMi93ZWJwYWNrL2Jvb3RzdHJhcCIsIndlYnBhY2s6Ly90ZXN0LWV4cG9ydC0wMi93ZWJwYWNrL3J1bnRpbWUvbWFrZSBuYW1lc3BhY2Ugb2JqZWN0Iiwid2VicGFjazovL3Rlc3QtZXhwb3J0LTAyLy4vc3JjL3VpL3Rlc3QuanMiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luXG5leHBvcnQge307IiwiLy8gVGhlIG1vZHVsZSBjYWNoZVxudmFyIF9fd2VicGFja19tb2R1bGVfY2FjaGVfXyA9IHt9O1xuXG4vLyBUaGUgcmVxdWlyZSBmdW5jdGlvblxuZnVuY3Rpb24gX193ZWJwYWNrX3JlcXVpcmVfXyhtb2R1bGVJZCkge1xuXHQvLyBDaGVjayBpZiBtb2R1bGUgaXMgaW4gY2FjaGVcblx0dmFyIGNhY2hlZE1vZHVsZSA9IF9fd2VicGFja19tb2R1bGVfY2FjaGVfX1ttb2R1bGVJZF07XG5cdGlmIChjYWNoZWRNb2R1bGUgIT09IHVuZGVmaW5lZCkge1xuXHRcdHJldHVybiBjYWNoZWRNb2R1bGUuZXhwb3J0cztcblx0fVxuXHQvLyBDcmVhdGUgYSBuZXcgbW9kdWxlIChhbmQgcHV0IGl0IGludG8gdGhlIGNhY2hlKVxuXHR2YXIgbW9kdWxlID0gX193ZWJwYWNrX21vZHVsZV9jYWNoZV9fW21vZHVsZUlkXSA9IHtcblx0XHQvLyBubyBtb2R1bGUuaWQgbmVlZGVkXG5cdFx0Ly8gbm8gbW9kdWxlLmxvYWRlZCBuZWVkZWRcblx0XHRleHBvcnRzOiB7fVxuXHR9O1xuXG5cdC8vIEV4ZWN1dGUgdGhlIG1vZHVsZSBmdW5jdGlvblxuXHRfX3dlYnBhY2tfbW9kdWxlc19fW21vZHVsZUlkXShtb2R1bGUsIG1vZHVsZS5leHBvcnRzLCBfX3dlYnBhY2tfcmVxdWlyZV9fKTtcblxuXHQvLyBSZXR1cm4gdGhlIGV4cG9ydHMgb2YgdGhlIG1vZHVsZVxuXHRyZXR1cm4gbW9kdWxlLmV4cG9ydHM7XG59XG5cbiIsIi8vIGRlZmluZSBfX2VzTW9kdWxlIG9uIGV4cG9ydHNcbl9fd2VicGFja19yZXF1aXJlX18uciA9IChleHBvcnRzKSA9PiB7XG5cdGlmKHR5cGVvZiBTeW1ib2wgIT09ICd1bmRlZmluZWQnICYmIFN5bWJvbC50b1N0cmluZ1RhZykge1xuXHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCBTeW1ib2wudG9TdHJpbmdUYWcsIHsgdmFsdWU6ICdNb2R1bGUnIH0pO1xuXHR9XG5cdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCAnX19lc01vZHVsZScsIHsgdmFsdWU6IHRydWUgfSk7XG59OyIsImNvbnNvbGUubG9nKCdIZWxsbyBmcm9tIHRlc3QuanMnKTtcblxuZnVuY3Rpb24gbG9nTXNnKHRleHQpIHtcbiAgY29uc29sZS5sb2codGV4dClcbn07XG5cbi8vIGNvbnN0IHRlc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGVzdCcpO1xuLy8gY29uc29sZS5sb2coJ3Rlc3QuanMgaXMgdXNpbmcgdWkuaHRtbDonLCB0ZXN0LmlubmVyVGV4dClcblxuaW1wb3J0ICcuL3N0eWxlcy5jc3MnO1xuXG5kb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdET01Db250ZW50TG9hZGVkJywgKCkgPT4ge1xuICBjb25zb2xlLmxvZygnSGVsbG8gZnJvbSB0ZXN0LmpzJyk7XG4gIGNvbnN0IGFwcCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdhcHAnKTtcbiAgYXBwLmlubmVySFRNTCA9ICc8aDE+SGVsbG8sIEZpZ21hIFBsdWdpbiE8L2gxPic7XG59KTsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=</script></body>
external js files for my UI