Maybe this question is trivial, but researching in several import/export docs did not give me an answer. I am trying to understand a code snippet that starts with the following imports on a CodePen example:
const Point = ol.geom.Point;
const RMap = rlayers.RMap;
I would rather expect module imports like this:
import { Point } from "ol/geom";
import { RMap } from "rlayers";
I thought it might be related to some hidden CodePen functionality, but also could not find an explanation. The CodePen is here https://mmomtchev.github.io/rlayers/#/add_delete when you click on the CodePen button. You can see in the JS settings that the CDN https://cdn.jsdelivr.net/npm/rlayers#1.4.1 was added. But I don't see how this would allow
the syntax given above. It did also not work, when I tried on a new CodePen.
In your Pen's settings, go to the JS panel and scroll down to add packages there. You can load in packages from Skypack that way, and they'll appear something like:
import * as React from "https://cdn.skypack.dev/react#17.0.1";
import { useState } from "https://cdn.skypack.dev/react#17.0.1"
(or whatever you want to install)
Related
I'm currently experimenting with the Elixir Phoenix framework together with Liveview. For my project, I would like to write some Javascript code that is only imported on certain pages (templates). Although this seems like something very trivial, I am struggling to get it working.
At this moment I created a seperate Javascript file as such assets/js/custom.js. After doing this, I added the following line to my root.html.heex as a first test to see if this already works. For this line, I simply looked at how app.js is imported.
<script defer phx-track-static type="text/javascript" src={Routes.static_path(#conn, "/assets/custom.js")}></script>
The next step would then be to figure out how to import it in a seperate template instead of the root. However, this first test already failed resulting in the following error:
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/custom.js (MyAppWeb.Router)
(my_app 0.1.0) lib/phoenix/router.ex:405: MyAppWeb.Router.call/2
(my_app 0.1.0) lib/my_app_web/endpoint.ex:1: MyAppWeb.Endpoint.plug_builder_call/2
(my_app 0.1.0) lib/plug/debugger.ex:136: MyAppWeb.Endpoint."call (overridable 3)"/2
(my_app 0.1.0) lib/my_app_web/endpoint.ex:1: MyAppWeb.Endpoint.call/2
(phoenix 1.6.15) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
(cowboy 2.9.0) c:/Users/arnod/Desktop/phoenixtut/my_app/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
(cowboy 2.9.0) c:/Users/arnod/Desktop/phoenixtut/my_app/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
(cowboy 2.9.0) c:/Users/arnod/Desktop/phoenixtut/my_app/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
(stdlib 4.0.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3
Could somebody help me figure this one out? How does one add seperate Javascript files and only import them in specific templates?
You can import all your custom javascript once in app.js, assign them as hooks which you can then use in your (live) views, wherever needed, for example;
custom.js
export const SomeFunction = {
mounted() {
alert("some function ran!");
}
}
app.js snippet
...
import {SomeFunction} from "./custom.js"
let Hooks = {}
Hooks.SomeFunction = SomeFunction
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})
...
Then in your live view render function (or template) add the hook
...
def render(assigns) do
~H"""
...
<div id="my-hook" phx-hook="SomeFunction"></div>
...
end
...
More about javascript interoperability can be found on the Phoenix hex page here. You can tie them to all sorts of phoenix events.
nb. Also note that #conn isn't available in live views, only #socket is.
Sorry for my bad english and a new learner programming.
I have a single problem with React.JS in App.js,
I have written an exterrnal JS file, called Fundamental.js, the code is the following:
const testing = () => {
console.log('test log 12456');
}
export default testing;
When I import Fundamental.js file into App.js, my VS Code shows a popup message:
'testing' is defined but never used.
how to solve it?
the import list in my React App.js is:
import logo from './Linux_Logo.png';
import './App.css';
import testing from './FundaMental';
Thank you so much to whoever solves my problem!
Welcome to SOF. In your component testing should be Testing [capitalized] and In testing nothing is returned that's why showing this in the terminal. Try this plz:
import React from 'react';
function Testing() {
return (
console.log('test log 12456');
)
}
export default Testing
when importing:
import Testing from './FundaMental';
It is better to keep the same name of the function name and the js file name.
VS Code is saying that you imported a function but you're not using it.
Your testing module defines the function testing. It doesn't execute it.
There are two ways to get rid of the warning:
Call the testing function in App.js, or
Don't import it into App.js.
If testing is the beginning of a React component then follow #Pabel Mahbub's answer, including the suggestion to rename the function Testing and rename the file Testing.js. As your app grows that will make it easier to manage.
This is only a warning/reminder that you import something but you never used it. React has this kind of checking that will warn us of the unusual code that we have. To fix this warning either trigger the function or remove it. Hope this helps!
I'm trying to find a javascript workflow solution to bundle my code in multiple files. I have a question I can't find the answer, maybe it's under my eyes but well...
If I use javascript import in a JS file for functionalities, that will be bundle into one JS file.
import anime from "animejs";
class Functionality1 {
// some code using animeJs
}
export let functionality1 = new Functionality1();
import anime from "animejs";
class Functionality2 {
// some code using animeJS
}
export let functionality2 = new Functionality2();
So at the end, I have 2 bundled files functionality1.js and functionality2.js. But both import animeJS library. If they are called on the same page, is AnimeJS called twice two ?
If yes, if there any way to avoid this behavior ?
If no, can you explain it to me ?
Thank you
It could be a duplicate question, but I could not find the answer I wanted, no matter how I tried to find it. So, I ask.
What I wanted:
Move the file in node_modules to my project, so that I can use it while editing the file
First try:
Moved the file I wanted to edit
And only modify the import path for that file
result:
weird:
All modified paths are correct
i.e. I can move to that imported file through that path in the IDE.
Example repo:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal1
Especially:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal1/src/components/editableText
Second try:
I moved all of the files imported as well as the file I want to modify, into the project.
result:
My opinion:
It seems to be related to Typescript or commonjs. But I do not know how to make it work.
Example repo:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal2
Especially:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal2/src/components/list/editableText/components/editable-text
If anyone knows how to solve the problem, I would be very grateful.
Here are a few options for you:
Solution 1: You could manually monkey-patch the module in question:
Here is how to do it (general approach):
Create a new file named ModifiedEditableText.tsx
Then in that file:
import { EditableText } from "#blueprintjs/core";
const newModule = {};
// First, copy over all the fields from the original module
for (let fieldName in EditableText) {
newModule[fieldName] = EditableText[fieldName];
}
// Then write new implementations of any function you want to change
newModule.function1 = function(arg, arg2, arg3) {
// new function implementation
// To call the original function do:
EditableText.function1();
}
export default newModule;
Solution 2: Fork the module, do your change, submit a PR and hope that it is merged (probably not gonna happen)
Solution 3: Fork the module, do your change(s) and import that module in your code instead of the official library
Solution 4: Use a library to monkey patch your component, here are some examples of such libraries:
https://github.com/ds300/patch-package
https://github.com/lukehorvat/overwrite
I have a jsx file using React components with Reflux. There is only one tiny action:
var ClickedAction = Reflux.createActions([
'clicked'
]);
How can I move this action to another file? According to the JSX documentation, it should be easy to include other files:
// import all classes that do not start with "_" from "a.jsx"
import "a.jsx";
I tried to move it in actions/clickedAction.jsx (or .js) and import it using import "actions/clickedActions.jsx" but I keep getting Illegal import declaration. How can I achieve this?
I am not using RequireJS and would like to avoid it if possible. One alternative solution I have found is to include this in the HTML file,
<script type='text/javascript' src='xxxxx/actions/clickedAction.js")'></script>
, but this is not ideal and would like to find another way. Thanks for your attention and help.
If you use Babel:
export default ClickedAction; // in action file
Otherwise, use old modules:
module.exports = ClickedAction; // in action file
require('actions/clickedActions.jsx'); // in another file