I'm trying implementing the pdf.js in Magento2 which use RequireJS, how could I implement it since the global var below has not been accessible?
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
To implement it with RequireJS you must use the names to instantiate like this image below.
As you can see you can change the global var using the local pdfjsLib created by the clojure.
Reference: https://github.com/mozilla/pdf.js/issues/7287#issuecomment-348143963
This is really helpful.
If you are using oracle JET. You also need to specify these entries in path_mapping.json and viewmodel. You can't rename it to pdf or something else... Stick to this long name. It will work.
"pdfjs-dist/build/pdf": {
"cwd": "node_modules/pdfjs-dist/build",
"debug": {
"src": "pdf.js",
"path": "libs/pdfjs/dist/pdf.js"
},
"release": {
"src": "pdf.min.js",
"path": "libs/pdfjs/dist/pdf.min.js"
}
},
"pdfjs-dist/build/pdf.worker": {
"cwd": "node_modules/pdfjs-dist/build",
"debug": {
"src": "pdf.worker.js",
"path": "libs/pdfjs/dist/pdf.worker.js"
},
"release": {
"src": "pdf.worker.min.js",
"path": "libs/pdfjs/dist/pdf.worker.min.js"
}
},
// The below code should appear in your viewmodel js
pdfjsLib.GlobalWorkerOptions.workerSrc = FRONTEND_HOST + "/js/libs/pdfjs/dist/pdf.worker.js";
Related
I want to import jsrsasign-all-min.js library to parse JWT tokens after login with Google OAuth2 in the Extension I am developing.
The problem I have is that I am getting the following error:
Uncaught ReferenceError: window is not defined
I supposed this comes up because this library is meant to run in the front-end and the background.js is not exactly that.
This is my manifest.json file:
{
"manifest_version": 3,
"name": "Reputation System",
"version": "1.0.0",
"key": "xxx",
"background": {
"service_worker": "background.js",
"type": "module"
},
"action": {
"default_title": "Reputation System"
},
"permissions": [
"identity",
"scripting"
],
"oauth2": {
"client_id": "xxx",
"scopes": [
"openid"
]
}
}
I am importing the library like this in my background.js:
import { KJUR } from "./jsrsasign-all-min.js";
And trying to use this function:
const user_info = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(id_token.split(".")[1]));
What I am doing wrong?
This library is not a module, it simply declares a bunch of global var, so you can't use the import statement because these variables won't be accessible from outside the script.
This library is not worker-friendly and it mistakenly uses window to access the global namespace.
Solution:
remove "type": "module" from manifest.json - this will enable importScripts.
change background.js to this:
self.window = self;
importScripts('./jsrsasign-all-min.js');
// now you can use KJUR and other globals vars
Alternative solutions:
use a different library that's worker-friendly and can be imported
use a build system that allows shimming module globals
manually build the library to produce a proper module
I am currently using SSH-Remote add-on for VisualStudioCode and some directories are having numbered names due to docker usage, my question is:
"Can i somehow 'rename' them without actually making changes to directory name"
With this i would give folder a nickname or a alias shown only to me and not changing actual values on my VPS
As a workaround you can add those folders to a workspace in VS Code, save the workspace and then edit the .code-workspace file you just saved to add a new node "name" where you can add custom names to the folder without actually renaming them.
{
"folders": [
{
"path": "../path/to/your/directory1"
},
{
"path": "../path/to/your/directory2"
}
],
"settings": {}
}
from this to
{
"folders": [
{
"path": "../path/to/your/directory1",
"name": "Your Custom NickName1"
},
{
"path": "../path/to/your/directory2",
"name": "Your Custom NickName2"
}
],
"settings": {}
}
When you create an Http triggered API, Azure function hosts it on
https://[function-app-name].azurewebsites.net/api/[Route-configured-in-application]
Is there any way of getting rid of the term api from the URL and make it look like:
https://[function-app-name].azurewebsites.net/[Route-configured-in-application]
The Azure Functions v2 solution is covered in this answer, the http bit needs to be wrapped in an extensions property.
{
"version": "2.0",
"extensions": {
"http": {
"routePrefix": "customPrefix"
}
}
}
Edit the host.json file and set routePrefix to empty string:
{
"http": {
"routePrefix": ""
}
}
The accepted answer no longer works if you're using version 2 functions, instead you need to put the http settings in an extensions property:
"extensions": {
"http": {
"routePrefix": ""
}
}
You can get caught out looking at the hosts.json reference because if you only look at the http section it shows just the http properties so make sure to check the start of the doc for the top level hosts.json format.
You could also leverage the power of Azure Function Proxies for this, which might be better if you want to be explicit about which methods or routes you want to access.
Just create a proxy.json file and add the following piece of JSON to it.
{
"$schema": "http://json.schemastore.org/proxies",
"proxies": {
"myazurefunctionproxy": {
"matchCondition": {
"methods": ["GET"],
"route": "/{slug}"
},
"backendUri": "https://%WEBSITE_HOSTNAME%/api/{slug}"
},
}
}
This sample will redirect all GET-requests to a route with /api/ prefixed.
I have some qunit tests setup to test my code that extensively uses requirejs. I use Chutzpah to perform the test running within VS. Everything works fine if I run the tests in the browser but not from within VS only. It seems to be ignoring my require.config call. If I change my references in my files to not point to shims but directly to files, it will work, but that breaks other things within my code.
Does anyone have this working? If so, how? I have looked at their example code but it doesn't use require.config and shims.
Start from this tutorial.
To run a config, with shims, just add a reference to your config file in chutzpah.json. Example below, slightly simplified for readability.
The chutzpah.json file
{
"Framework": "qunit",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"References": [
{ "Path": "../Scripts/Components/RequireJS/require.js" },
{ "Path": "config.js" }
]
}
The config.js file
require.config({
"paths": {
"jquery": "../Scripts/jquery-2.1.4",
"jquery-linq": "../Scripts/jquery.linq",
"signalr": "../Scripts/jquery.signalR-2.2.0",
"signalrhubs": "../Scripts/mock-signalr-hubs",
"knockout": "../Scripts/knockout-3.3.0",
"constants": "../Scripts/constants",
"HomeVm": "Source/HomeVm"
},
"shim": {
"jquery.linq": {
"deps": ["jquery"]
},
"bootstrap": {
"deps": ["jquery"]
},
"signalr": {
"deps": ["jquery"]
}
}
});
I'm using symfony 2.1 and I want to add a library to vendors. The library do not exists in packagist. I can't manage it with composer. When I install bundles or others vendors through composer, it manage autoload for me. But where to register autoload when the vendor is not managed with composer?
You can add libraries to composer that are not in packagist.
You must add them in the repositories array of your composer.json file.
Here's how to load a github repository that has a composer.json file, even though it's not on packagist (for example a fork you would have done to fix a repository) : http://getcomposer.org/doc/02-libraries.md#publishing-to-a-vcs
And here's how to load a library that's on a git/svn repository, or a zip file : http://getcomposer.org/doc/05-repositories.md#types
An example using various possibilities:
{
"repositories": [
{
"type": "vcs",
"url": "http://github.com/igorw/monolog"
},
{
"type": "package",
"package": {
"name": "smarty/smarty",
"version": "3.1.7",
"dist": {
"url": "http://www.smarty.net/files/Smarty-3.1.7.zip",
"type": "zip"
},
"source": {
"url": "http://smarty-php.googlecode.com/svn/",
"type": "svn",
"reference": "tags/Smarty_3_1_7/distribution/"
},
"autoload": {
"classmap": [
"libs/"
]
}
}
}
],
"require": {
"monolog/monolog": "dev-bugfix",
"smarty/smarty": "3.1.*"
}
}
You should be able to use Composer for registering vendor libraries not available via packagist. I'm not entirely sure, but this should work fine:
{
"autoload": {
"psr-0": {
"Acme": "src/",
"MyVendorLib": "vendor/my-vendor/src",
"AnotherLib": "vendor/another-vendor/lib"
}
}
}
You just need to modify your composer.json file for the autoload value:
http://getcomposer.org/doc/04-schema.md#autoload
//composer.json in your symfony 2.1 project
"autoload": {
"psr-0": {
"": "src/",
"YourLibrary": "src/location/of/lib"
}
},
And then in your controller for example:
namespace Acme\UserBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use YourLibrary\FolderName\ClassName;
class DefaultController extends Controller {
/**
* #Route("/")
* #Template()
*/
public function indexAction()
{
$lib = new ClassName();
$lib->getName();
return array('name' => $name);
}
}