I am in the middle of converting a Polymer 2 app to Polymer 3. Modulizer did not work for me so I converted it manually. Thanks to the great upgrade guide it has been mostly straight forward so far.
One task is left though:
in my Polymer 2 app I had a special html import (d3-import.html) that brought in the d3.js lib version 3 which comes as a plain JavaScript file (no ES6 module!). This import was dynamically loaded in only two out of overall 20 pages because the other 18 pages did not need it.
In Polymer 3 I can not import it as an ES6 module because it is not a module. Loading it in my main start.html would mean it gets loaded even if the user only uses the other 18 pages that don't need it.
I tried writing script-tags in my web component templates but that doesn't seem to work. Unfortunately I don't see any error in the browser tools. The template simply stops to load at the line of the script-tags.
Any idea how to do this?
Additional question:
since I start using lit-element in the same application. How to solve the same problem with lit-element?
Edit: note that I currently don't use any build steps/tools except for polymer-build to replace the module paths with actual file paths.
Note that this challenge has nothing to do with Polymer or LitElement, this is only an issue with how to load non-module resources from a module.
The most straightforward way that I know of is to use a bundler like Rollup that can support CommonJS or UMD. Rollup has the commonjs plugin for this: https://github.com/rollup/plugins/tree/master/packages/commonjs
The other option is to upgrade to D3 5.x, which appears to be published as standard modules itself. Given the number of files involved, you'll still likely want a bundler to reduce network roundtrips.
Related
If I move ComponentFoo.js from folder X to folder Y, than a bunch of import statements break. Looking into this it seems there are many solutions for typescript, but what about js / es6? If I move a file in the editor, it should find all the import statements and update them to the new location. Is this possible?
Old post, but this might help some Googlers. This feature can be enabled and disabled in User Settings. For Javascript and Typescript, it's called "Updated Imports On File Move".
I had apparently disabled it and just figured the feature was broken :X
VS Code has built-in support for this for both javascript and typescript since VS Code 1.24.
For JavaScript specifically, you need to make sure VS code's language support can find all the references to the file so that imports referring symbols in that can be updated properly. Definitely create a jsconfig.json for your project, and also consider enabling semantic checking for JavaScript so that VS Code shows when imports are not being properly resolved
If your project is configured properly but files are not being updated, make sure you are running the latest VS Code insiders build and report an issue if it still doesn't work
for flutter developers you should move files one by one. vscode doesn't support multi file moving with refactor yet.
Just use IntelliJ. It handles all kinds of refactoring perfectly. I'm a huge fan of VS Code, but refacotoring is definetly not one of it's stengths. Some imports don't get detected, and the imports can get modified in a weird way. For example, I had an import like this:
import { myStore} from 'src/common/stores/myStore';
When moving the file of myStore.ts to a different folder, VS Code constructed this bull**it:
import { myStore} from 'src/common/composables/myStoreStore';
The line above is no typo!
Btw I'm using vetur, maybe thats causing it, I don't know ...
I am developing a web component using Polymer v3, and need to include some custom elements defined in legacy Polymer 2 components in the template HTML of my new component.
Since HTML imports are no longer supported in Polymer 3, what approach should I take to include them? If I was using Polymer 2 I could just add the following in my component's HTML file:
<link rel="import" href="../my-legacy-component.html">
I have tried adding the above link into the template HTML of my component, but it appears that doesn't work. I have also tried various import commands to reference the JS files inside the legacy component directly, but received various inscrutable JS errors so I'm not sure if that is the correct way to go either.
I can't believe there isn't a simple way to do this - would the Polymer team really introduce a new version of the library that is completely incompatible with all the components created using older versions?
Did you try to use polymer-modulizer?
Modulizer performs many different upgrade tasks, like:
Detects which .html files are used as HTML Imports and moves them to .js
Rewrites in HTML to import in JS.
Removes "module wrappers" - IIFEs that scopes your code.
Converts bower.json to package.json, using the corresponding packages on npm.
Converts "namespace references" to the proper JS module import, ie: Polymer.Async.timeOut to timeOut as imported from #polymer/polymer/lib/util/async.
Creates exports for values assigned to namespace referencs. ie, Foo.bar = {...} becomes export const bar = {...}
Rewrites namespace objects - an object with many members intended to be used as a module-like object, to JS modules.
Moves Polymer element templates from HTML into a JS template string.
Removes s if they only contained a template.
Moves other generic HTML in the document into a JS string and creates it when the module runs.
more on github
I have ran into the same problem with the module js-yaml earlier. I don't have enough reputation for a comment yet so I just write it down here.
Run this sudo npm install -g js-yaml -> This will install the missing package for the tool
Then at the root of your project, run modulizer --import-style name --out . -> This will convert your component from Polymer 2 to Polymer 3. The option --import-style name tells the tool to use package name instead of path. --out will make the tool writes those files to the directory.
After that, if no error prompts. Try to serve it with polymer serve --module-resolution=node -> Since we are using node modules now, we have to provide the --module-resolution=node option.
I wrote a library in Cython that has two different "modes":
If rendering, I compile using GLFW.
If not rendering, I compile using EGL, which is faster, but I have not figured out how to render with it.
What is the recommended way to handle this situation?
Right now, I have the following directory structure:
mujoco
├── __init__.py
├── simEgl.pyx
├── simGlfw.pyx
├── sim.pxd
└── sim.pyx
simEgl.pyx contains EGL code and simGlfw.pyx contains GLFW code. setup.py uses an environment variable to choose one or the other for the build.
This works ok, except that I need to recompile the code every time I want to switch between modes. There must be a better way.
Update
I agree that the best approach is to simultaneously compile two different libraries and use a toggle to choose which one to import. I already do have a base class in sim.pyx with shared functionality. However this base class must itself be compiled with the separate libraries. Specifically, sim.pyx depends on libmujoco.so which depends on either GLFW or EGL.
Here is my exhaustive search of possible approaches:
If I do not compile an extension for sim.pyx, I get ImportError: No module named 'mujoco.sim'
If I compile an extension for sim.pyx without including graphics libraries in the extension, I get ImportError: /home/ethanbro/.mujoco/mjpro150/bin/libmujoco150.so: undefined symbol: __glewBlitFramebuffer
If I compile an extension for sim.pyx and choose one set of graphics libraries (GLFW), then when I try to use the other set of graphics libraries (EGL) this does not work either unsurprisingly:
ERROR: GLEW initalization error: Missing GL version
If I compile two different versions of the sim.pyx library, one with one set of libraries, one with the other, I get: TypeError: unorderable types: dict() < dict() which is not a very helpful error message, but appears to result from trying to share a source file between two different extensions.
Something like option 4 should be possible. In fact, if I were working in raw C, I would simply build two shared objects side by side using the different libraries. Any advice on how to get around this Cython limitation would be very welcome.
(This answer is just a summary of the comments with a bit more explanation.)
My initial suggestion was to create two extension modules defining a common interface. That way you pick which to import in Python but be able to use them in the same way once imported:
if rendering:
import simGlfw as s
else:
import simEgl as s
s.do_something() # doesn't matter which you imported
It appears from the comments that the two modules also share a large chunk of their code and its really just the library that they're linked with that defines how they behave. Trying to re-use the same sources with
Extension(name='sim1', sources=["sim.pyx",...)
Extension(name='sim2', sources=["sim.pyx",...)
fails. This is because Cython assumes that the module name will be the same as the filename, and so creates a function PyInit_sim (on Python 3 - Python 2 is named slightly differently but the idea is the same). However, when you import sim1.so it looks for the function PyInit_sim1, fails to find it, and gives an error.
An easy way round it is to put the common code in "sim.pxi" and use Cython's largely obsolete include mechanism to textually include that code in sim1.pyx and sim2.pyx
include "sim.pxi"
Although include is generally no longer recommended and cimport is preferred since it provides more "Python-like" behaviour, include is a simple solution to this particular problem.
i'am trying to use components from another module, but is not working.
Look what i have:
I have my project, its an app to convert files, and its working everything is ok. Now i want to change the interface... for that i cloned a github repository thats is a project with the components that i want to use, and imported it as a module. (should i import as a module or as a project?)
Everything great till now, but when i try to use the components from the module i cant find the classes or even the module...
Any suggestions?
You should add your imported sources as a new module (let's call it B), then you should add a dependency from your original module A to your module B in order to use its code.
See this page on how to configure module dependencies.
I am trying to compile this sample program but I am brand new to Flare and ActionScript. Here is the DependencyGraph example that I am trying to compile: http://flare.prefuse.org/apps/dependency_graph.
The error I am receiving right now is:
Access of unidentified property App
Are there certain packages or project files that I will need to import or add to the source code in order to fix this?
Looks like you need to grab this class as well:
http://flare.prefuse.org/src/flare.apps/src/flare/apps/App.as aside from that it looks like the imports are all coming from packages in flare and should be included in the flare swc file.
Edit
Okay so starting from scratch I was able to get Flex 3.4 SDK playing nicely with the flare demos:
Download zip http://sourceforge.net/projects/prefuse/files/flare/alpha-20090124/prefuse.flare-alpha-20090124.zip/download
extracted flare.apps to my desktop and build/flare.swc to my desktop
In FlashBuilder/Eclipse import a project (existing project) select the flare.apps folder on the desktop.
replace the existing library reference to bin/flare.swc with the one from the desktop. When I imported the project it had in the project properties->ActionScript Build Path I selected the bin/flare.swc entry it had and hit remove, then hit add swc and browsed for the one extracted to my desktop from the flare.zip.
Compile/Run
That all worked great with Flex 3.4 (Flare is out-dated if you haven't noticed). Upping my SDK to 4.6 I had to replace JSON (ambiguous due to a new one in the default package) with com.adobe.serialization.json.JSON. With Flex 3.4, did you see any errors relating to JSON? I don't have 3.4 on my system so I am using 3.6 right now and see many errors regarding the ambiguity of JSON. With regard to 3.4 I had no JSON errors, think the Class may have been introduced around when 3.6 was put out so that makes sense too... the issue is if you import JSON from some package but then it also has JSON in the default package, it doesn't know which one you want to use, if you use the fully qualified class name wherever you were using the shortened version it will remove the ambiguity so where you had JSON.decode just replace with com.adobe.serialization.json.JSON.decode, believe the one in the default package is the new one and doesn't match up to the old one's interface (method names) 100%.
After building with 4.6 it's a mixed bag... I see the loading bar and all the lines between dependencies but not seeing the labels themselves, my guess is something to do with the change in the font/text rendering engine between versions is making a difference though I'm not sure immediately how to resolve that. No errors compiling/running though.
Edit 2 good deal just had to add this to the font embed for it to work in 4.6
,embedAsCFF='false'
[Embed(source="verdana.TTF", fontName="VerdanaCust",embedAsCFF='false')]
Let me know if you try out these steps and still have issues, or if this helps you resolve your problems.
Edit 3
Also added you on my gmail alternatively can chat on SO directly to keep any relevant information connected to this QA