Im'm making my first Spree extension and need to add Papaparse external library ( https://www.papaparse.com ).
I found similar issue ( I would like to add new javascript file to my spree extension ), the re the answer is " You need to require the braintree gem in your gemspec as a dependency", but Papaparse doesn't seems to be as a gem.
I would be grateful for some instructions or resources.
IMHO, creating a Spree extension only to load a js file seems overkill, but if you still want to move forward and assuming you want to create an extension for the backend, just download the minified version of PapaParse into app/assets/spree/backend folder inside your extension and add to your spree_papaparse.js the next line
//= require_tree .
Then, in your project, add to vendor/assets/javascripts/spree/backend/all.js
//= require spree/backend/spree_papaparse
Related
I currently have a project that is using ClojureScript, shadow-cljs, re-frame, and CKEditor.
I am trying to figure out how to write a custom plugin for CKEditor usoing CLJS instead of JS.
CKEditor uses the following to load external custom plugins
// Loads a plugin from '/myplugins/sample/my_plugin.js'.
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/', 'my_plugin.js' );
Is there a way to write my_plugin.js in CLJS in my current project?
I think your question is: I have a CLJS project that uses shadow-cljs and happens to use CKEditor as a library. I also want to create a plugin for CKEditor within the same project.
If that's the case, I think what you need is just create a new build for the plugin code in the :builds section of your shadow-cljs.edn file and configure it properly (eg. source files, etc.). See the Build Configuration section of the shadow-cljs User's Guide for details.
Once you build your plugin, it will put the output JS file in some location. Probably you need to copy this plugin JS file to a location in the "parent" project before building the main project.
I'm developing a Wordpress "widget" that is going to be a little react app. I've chosen create-react-app for this purpose.
Now I can see how to run the development server standalone easily enough, but I'd like to develop it while it sits inside the Wordpress website. I've created a trivial "Custom HTML" widget:
<div id="root"></div>
<script type="text/javascript" src="http://localhost:8080/static/js/bundle.js"></script>
This does not seem to work however...
Note I came up with /static/js/bundle.js by looking at the requests in the network tab when loading http://localhost:8080 directly, which is the prescribed way to access the dev version of the app.
So how do I access the development version of the app (with all the live reloading goodness) while embedded on my local version of the Wordpress site?
I had this same problem today in a PHP app I am developing. It is very frustrating to embed a create-react-app in development mode, and I had to consult a lot of different resources to learn how to do so. Here is a summary of my findings.
Using an iframe
Using an iframe to embed the create-react-app, as #quickshiftin suggests, is not a bad idea, but if you wish to pass configuration to the embedded SPA by calling methods or setting global variables in Javascript, it will not work* -- as the MDN documentation says (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scripting), iframes are subject to the same-origin policy.
* (Note: I found out after writing most of this answer that there is indeed a way to bypass the same-origin policy. It's called Window.postMessage(), and it's also mentioned in the section of the MDN documentation that I linked above. You may want to consider using that. But if you would like to avoid using an iframe for whatever reason, read on :)
Create-React-App file structure; embedding in production mode
The first thing you must know is that embedding bundle.js is not enough -- create-react-app builds multiple JS files that need to be embedded using <script> tags in the correct order. This blog post by Jeremiah Tabb describes the file structure of the bundled code and suggests a way to embed the create-react-app in production: https://betterprogramming.pub/how-to-embed-a-react-application-on-any-website-1bee1d15617f
The filenames of the bundled code contain hashes which change at every build. The hashing can't be disabled, it's a WONTFIX in create-react-app (https://github.com/facebook/create-react-app/issues/821). So, to get the bundled js filenames for a production build, in PHP, you can just traverse the build/static/js directory and output one <script> tag per .js file you find. (It may be wasteful to always request all chunks, but I haven't yet taken the time to look into the right way to do it.)
Development mode looks for chunks under the wrong path
But in development mode, which is your actual question, it is handled a bit differently. The index.html served by the dev server only loads three scripts initially: bundle.js, vendors~main.chunk.js and main.chunk.js. The other chunks are loaded dynamically. You can try embedding those three scripts on your Wordpress page, but you will find that at runtime, the 'bootstrap' code generated by Webpack looks for the chunks at the wrong URL, using e.g. localhost instead of localhost:3000, resulting in a chunk loading error.
PUBLIC_URL and "homepage" don't work in development mode
According to the Create-React-App documentation and various other answers on this site, you're supposed to be able to use the environment variable PUBLIC_URL or the key "homepage" in package.json to override the hostname and port where the JS code is served so that the chunks will load, but these settings don't do anything in development mode. This is an open issue in create-react-app: https://github.com/facebook/create-react-app/issues/9001
Workaround using npx patch-package
You might think you are in trouble and will have to eject your project and modify the webpack configuration yourself to get this working. But fortunately, there is a workaround described here in a comment by SergeyVolynkin which solves the problem without ejecting, using npx patch-package to patch react-dev-utils:
https://github.com/facebook/create-react-app/issues/9001#issuecomment-838370686
What SergeyVolynkin does not mention is that, after creating the patch and checking it into VCS, you should set up patch-package in your package.json so that the patches will be applied by npm / yarn when you run yarn / npm install. See the documentation for patch-package here: https://github.com/ds300/patch-package#set-up
Summary
After applying SergeyVolynkin's patch, I was able to get the development build embedded in my PHP app. I used the following scripts in my package.json:
"scripts": {
"start": "PORT=1234 PUBLIC_URL=http://localhost:1234 WDS_SOCKET_PORT=1234 react-scripts start",
"postinstall": "patch-package"
}
And I used the following lines in the HTML served by my PHP app:
<script src="http://localhost:1234/static/js/bundle.js"></script>
<script src="http://localhost:1234/static/js/vendors~main.chunk.js"></script>
<script src="http://localhost:1234/static/js/main.chunk.js"></script>
By doing this, I could embed an app created using create-react-app in dev mode in my PHP app.
I have a ZF2 project where I generate, minify, etc... my assets via gulp. For example I generate a styles.css file which gets included with the ZF2 headlink view helper:
echo $this->headLink()->appendStylesheet($this->baasePath('assets/css/styles.css));
Now I have the problem, that the file gets cached by the browser and does't notify any changes. Does anyone know a way to handle that? Maybe add a version number to the generated css file, but then I really don't want to edit all the ZF2 templates which inlcude that file.
Thanks for any reply.
There's a load of ways to do this, but one option is to use Assetic - a well known asset manager package. Tere's a few ZF2 modeules to help integrate this library into the framework too. A quick google search throws up some:
https://github.com/magnetronnie/zf2-assetic-module
https://github.com/kriswallsmith/assetic/
This module will help manage assets such as CSS/JS, and also has some "cache busting" features where by you can change the url based upon the file modification date to ensure if changes when ever the file is re-downloaded by the browser.
I've an issue with braintree api integration and having an issue with generating the token from api, but it's showing an error-
"Class 'App\Controller\Braintree\ClientToken' not found".
I've adding the Braintree library in webroot directory and include by-
require_once('braincard\includes\braintree_init.php');
I'm generating the braintree token with following function.
Braintree\ClientToken::generate();
Regards
By simply using Braintree\ClientToken::generate();, you are indicating that it is relative to the current namespace, which is \App\Controller. Try \Braintree\ClientToken::generate(); instead, this should work.
You might also investigate how you can use Composer to move the library to a move "Cake-ish" folder (having it in the webroot sounds like a potential security hole), and autoload the class without needing to resort to require_once or the like.
I am using google web components from the following page but it seems that it has a lot of error. A lot of file is not found. Note: I am using google sign in and google analytics.
Google Web Components
How to resolve the issue without downloading and replace the the missing file path one by one?
You approach is completely wrong.
TL;DR One can not simply refer the url for the file and hope that relative paths in it are resolved automagically. The workflow is a way more complicated.
You should create an application (the easiest way is to use Yeoman’s generator for that). Than you should explicitly specify, which components you want to use with bower:
bower install google-calendar --save
... etc
That would install the components locally (--save is to update your bower.json).
Then you probably would vulcanize everything (thanks yeoman generator, grunt script comes with all the tasks prepared.) Your project is now ready to deploy.
Hope it helps.
You should be able to install the missing dependency components the same way you got your Google Web Component. Whether that is via download or bower or whatever, just make sure the relative paths line up. Even if you create a build task or generator you will still need the components dependencies correctly referenced.