I'm trying to use the PriorityQueue functionality provided by Google Closure, but I can't seem to be able to figure out how to do it without using the Closure Compiler. Since I'm not using any custom modules, it seems that I shouldn't need to use the Compiler.
My folder structure is as follows:
/Project/html/index.html
/Project/ThirdParty/closure-library
My index.html file contains:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="../ThirdParty/closure-library/closure/goog/base.js"></script>
<script>
goog.require('goog.structs');
goog.require('goog.structs.PriorityQueue');
</script>
</head>
<body></body>
</html>
The above however gives me the following:
goog.require could not find: goog.structs
goog.require could not find: goog.structs.PriorityQueue
I'm a bit at a loss as to why that happens as my code seems to be in line with the example given at https://developers.google.com/closure/library/docs/gettingstarted
How did you retrieve the library? If you "npm install" you should have a deps.js file next to base.js which should be everything you need.
Related
I am doing a little project where i have prepared the back end in python and the graphic user interface woth HTML, CSS & JS.
The python script doesn't require any external librariesand the only thing that it does is opening a JSON file with the data processed, since it's a game the results are casually generated, and because of this I don't have to pass any parameters to the script.
The problem is that I don't know how to trigger the script so it generates the json that i can access trough JabaScript.
the scheme of the project is this:
index.html
pages (folder)
newGame.html
loadGame.html
rules.html
python (folder)
python_script1.py
python_script2.py
python_script3.py
main.py
specifically i have to trigger the script once the user has loaded the newGame page or the loadGame one.
(obiuvsly the js isn't node.js is actual client-side JavaScript)
I obiuvsly did some research and i found the pyodyde open source project does what i want, the fact is that i can't figure out how to connect the interface file with the back-end one with this resource.
solution
Ok, with some other research i found out how to solve my problem.
But firstable I want to thank you guys for recommending me the PyScript library.
The problem I was having is that i needed to connect a python file within the pyscript tag.
At first i tought that I had to import it with the import keyword and than executing the file.
But than I discovered that the py-script tag has an src attribute and you can link all the external files that you want.
So, in the end, iall i had to do was to connect my file is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>newGame</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<py-script src= "./python scripts/test_file.py"></py-script>
<script src="script.js"></script>
</body>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</html>
There is a new library called PyScript (it can help you run python in your HTML), all you need to do to install the cli is doing this command:
pip install pyscript-cli (This command will install the cli not the library).
then you should do this command:
pyscript wrap python_file.py (NOTE: this will convert the python file to an html file so the python file name would be the name of the html file)
And it should be done.
The HTML code would be this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Homepage</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
Code here
</py-script>
</body>
</html>
But than, once i typed in the command and created the html file from the python script, how do I connect it to the "newLevel" page?
When I try to use the framework I am seeing this error in the browser:
Failed to resolve module specifier "#lit/reactive-element"
In my html thymeleaf template I have:
<script type="module" th:src="#{/js/simple-greeting.js}"></script>
and in the simple-greeting.js I am referencing the lit framework like:
import {html, css, LitElement} from '/webjars/lit/index.js';
the "simple-greeting.js" is included with my static js. And the Lit dependency is included as a webjar.
I feel like I'm missing something fundamental (hopefully simple) with how the JS frameworks import/export modules. Is there some sort of build process I need to do to leverage the JS framework? (I really hope not)
To solve that problem, you’ll need a new tool called import maps.
The following html page should be able to load
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="importmap">
{
"imports": {
"lit": "/webjars/lit/index.js",
"#lit/reactive-element": "/webjars/lit__reactive-element/reactive-element.js",
"lit-html": "/webjars/lit-html/lit-html.js",
"lit-element/lit-element.js": "/webjars/lit-element/lit-element.js"
}
}
</script>
<script type="module">
import {LitElement, html, css} from 'lit';
console.log(LitElement);
</script>
</head>
<body>
</body>
</html>
I've been using Webpack for some time, but it was a little bit too extensive for me.
That's why I wanted to start off with Parcel, to get the basics of bundling projects together.
Let us say I have a basic index.html file, which has a link to a JavaScript file.
Within this javascript file, I have a couple of dependencies imports.
It should look a little bit like this.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Helloo</h1>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
and script.js
import "../styles/sass/main.scss";
import is from "is_js";
const myString = "Hello World";
Now, when I bundle the index.html file using
parcel bundle index.html --public-url .
i would like to use chrome developer tools console to console (from the console) some javascript as e.g. myString
But because parcel bundles everything inside one function, this variable is not accessible and the console returns:
Uncaught ReferenceError: sections is not defined
at :1:1
How can i still debug my projects inside the console using parcel as a bundle processor?
I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>
I'm having trouble with some components running in MS IE 10/11.
And according to this arcticle from Angular.io (https://angular.io/docs/ts/latest/guide/browser-support.html) I need to import an external script.
<script src="node_modules/core-js/client/shim.min.js"></script>
Which I placed in my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
...
<script src="../node_modules/core-js/client/shim.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
But when i build for production it doesn't add it to the build, it just leaves it there ending in a script not found error when running the application.
I'm probably missing something but I don't know what.
Thanks in advance!
In your .angular-cli.json file, locate (or create) the "scripts" key in the definition for your app, and add an entry in the array for the shim.js script, e.g.:
"scripts": [
"../node_modules/core-js/client/shim.min.js"
],
Restart your ng serve or rebuild your bundles and you should be good to go.
Hope this helps!
You need to add CSS files and JS files in the angular-cli.json file. If you are not using angular-cli in this case you need to configure in the build tool which you are using