Comments (20)
@thevirajshelke I'm afraid the current behavior won't be changed anytime soon as it works fine for me and I have a ton of more important tasks.
In the longer run I would like to embed all files from /images/ directory into xel.min.js so that Xel could be imported from any URL, including CDN domains.
from xel.
@thevirajshelke Thanks for submitting the pull request, but I'm afraid this is not the right approach to solve the problem. Following code should not be allowed to execute in the renderer process of a properly sandboxed Electron app:
const electron = require('electron');
I'm working right now on a proper fix, I will report my progress in several hours.
from xel.
So by properly sandboxed app you meant setting the
nodeIntegration
tofalse
?
Yes, by "properly sandboxed app" I meant an app that follows https://github.com/electron/electron/blob/master/docs/tutorial/security.md
from xel.
This has to wait until I migrate the code from HTML import to ES6 modules, i.e. after Chrome 61 becomes stable.
from xel.
Any temporary fix?
from xel.
The way how relative URLs are resolved by HTML, CSS and SVG is a total mess and HTML imports are adding even more complexity.
For now I would recommend you to organize your directory structure so that Xel can be imported with <link rel="import" href="node_modules/xel/xel.min.html">
(i.e. keep index.html
in the same directory as node_modules
and package.json
).
from xel.
BTW, if you are testing the app in a browser (instead of Electron or NW.js), you should make sure you are using a localhost server and ~/Desktop/MyProject/app/
is served as the root directory.
from xel.
Actually I am using Electron
from xel.
I see. Unfortunately you will have to change the directory structure for now.
from xel.
I used a very dirty workaround by copying the node_modules/xel folders into the folder with my .html files. This allows me to keep my file and folder structure for now.
from xel.
There is a workaround to put an "iconset" attribute in every x-icon element pointing to the relative path of the icons.svg file. That gets really tedious really fast, so another workaround can be done in javascript.
The following is a workaround for Electron, but could apply to others I suppose.
For Electron, you can add the following to the main and renderer js files:
- In your main.js, on BrowserWindow object, do this:
spawnedWin.baseDir = __dirname; //sets the base install directory for electron app - In your renderer.js file, add this:
const remote = require('electron').remote;
const base = remote.getCurrentWindow().baseDir; - In renderer.js, in whatever function you call on window load, add this:
document.querySelectorAll("x-icon").forEach(e=>{
e.setAttribute("iconset", base + "/node_modules/xel/images/icons.svg");
})
There is an iconset attribute that the xel javascript looks at to determine the path to the svg file. This just overrides it.
from xel.
I find a solution for this problem, in xel.min.js use this (around line 7413):
if (this.hasAttribute("iconset") === false || this.getAttribute("iconset").trim() === "") { return "../../node_modules/xel/images/icons.svg"; }
Adding a jump to parent directory until you found the node_modules folder, you should suppose the xel.min.js file is in the same directory the index.html file
My directory structure is:
- node_modules/
- src/
- rendered/
-index.html
- rendered/
from xel.
I am currently facing the same issue.
My file structure is the same as alek117 and I use electron-webpack.
I tried to add an iconset attribute but it does not work.
Is there a way to fix this issue?
I also saw that there is no "images" folder in my node_modules/xel. Is that normal?
from xel.
I also saw that there is no "images" folder in my node_modules/xel. Is that normal?
That is not normal, when you install Xel from NPM it should create node_modules/xel/images/icons.svg file.
from xel.
I am facing the same issue. using the toolkit in electron and my index.html is not in the same folder as that of node_modules. Any workaround as of now?
When can we expect a fix?
from xel.
@jarek-foksa No issues. I am pretty sure you must be busy making this toolkit more awesome. I really loved the toolkit so I wanted to use it for my electron app but unfortunately, my folder structure is different so ran into an issue. I have done a bit of R&D and came across a solution for this which is electron specific. I have created a new pull request, kindly check it and feel free to merge it :)
Looking forward to your reply! Thanks :)
And nice idea of embedding all files in the long run :) Waiting for more awesome stuff in Xel! All the best 👍
from xel.
@jarek-foksa Okay sure take your time & let me know :)
One thing that I know is that for this to work properly nodeIntegration
has to be set to true
. I get it!
So by properly sandboxed app you meant setting the nodeIntegration
to false
? I am just aksing so that I get to learn. Will be helpful for me because right now I am developing an electron app. I can use your tips. So whenever you free, lemme know about this.
Thanks a lot!
from xel.
Okay got it! Thanks a lot for this :) 👍
from xel.
This issue should be fixed in Xel version 0.0.196.
Please note that in Xel 1.0 I might reduce the default iconset (which is embedded into xel.min.js) to ~150 most commonly used icons (down from 964 icons currently). Users would be advised to use Boxy SVG or some other tool to generate a custom iconset that contains additional icons needed by given project.
from xel.
@jarek-foksa Thanks a lot for solving this issue on such a high priority.
I really appreciate your efforts :) All the very best 👍
from xel.
Related Issues (20)
- <x-menu> The status will be deselected
- please fix relative import paths HOT 1
- package.js doesn't process theme files / iconsets on Windows.
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'styleMap') at #k (xel.js:1:51212) HOT 3
- Typescript support? HOT 1
- x-tagsinput leaves a trailing comma. HOT 1
- Deprecate global "size" setting HOT 1
- Popover API migration
- CSS Anchor Positioning API migration
- <x-input> Width HOT 1
- Can animation be disabled on elements? HOT 4
- No support for scrolling? HOT 5
- Popovers in <x-buttons> don't close HOT 2
- <x-tab> disabled prop does not work HOT 1
- <x-tooltip> does not work with <x-menuitem> HOT 4
- Some <x-colorselect> events don't work HOT 2
- <x-colorselect> returns selected value in rgb(...) format in some cases HOT 1
- <x-radios> don't have a change event HOT 3
- Support for <x-tooltip> in <x-select>
- "decrement-arrow" has wrong rotation HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xel.