Just started a fresh new React project, using WebStorm as my IDE.
Lets look at some type of material-UI typography 'varient' attribute:
For an unknown reason, WebStorm does not peek at these types:
('no suggestions' is written buy when I screenshot the message disappear)
VSCode auto-suggest with no problems on this union type:
What's going on? I know for sure that these sort of suggestions worked previously in WebStorm (I'm using latest version).
This is the code:
import { Typography } from "#mui/material";
function App() {
return (
<div className="App">
<Typography variant="">hello world, doing good?</Typography>
</div>
);
}
export default App;
WEB-53199 is fixed in the upcoming 2021.3.2 update
I know this might be a duplicate of this question but there was no clear answer ever.
Polymer 2 Framework has a quite good documentation so far but when it comes to the build process there`s not enough explanation.
I've successfully created my own element, also with external scripts referenced and everything runs fine with
polymer serve --open
But I've spent so much time to get this built and to include the output into a minimal HTML template without success. Is it really that tricky?
I`ve even tried again with the empty element template, no chance. This template has a nearly blank polymer.json:
{
"lint": {
"rules": [
"polymer-2"
]
}
}
If I build that right away with
polymer build
(should use default build behaviour) then I get a default build folder with an index.html and bower_components folder. There`s no reference to my created custom element ("Hello ...").
What do I have to do to get a final build of this "Hello Something" template and include it into a minimum html page?
There are a lot of different ways to go from single component to app with that single component, and I'm not going to say 100% that this is the best, but it should work. "What do I have to do to get a final build of this "Hello Something" template and include it into a minimum html page?", is a pretty flexible request, so even in the below there could be lots of alternatives for you, but the following would be my suggestion. We'll start in the command line, from the Desktop or a folder where you keep you projects.
mkdir minimal-html-page
cd minimal-html-page
polymer init
// here make sure you choose `polymer-2-application` other questions re of little consequence in this specific use case
bower install {yourComponent} --save
// in that case that you haven't published to github, copy and paste also works. Paste into the `src` directory if that's the case.
atom .
// or whatever editor you prefer
Now you're in your project, and there is just one change needed to get you going.
index.html
Change the current HTML import
<link rel="import" href="/src/build-test-app/build-test-app.html">
to link to your component.
At this point you should be free to use polymer build to have the project built, then it'll structure your code to be deployed in other applications via something that will look like
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
This is the most basic of builds and won't account for any x-browser or performance goals you might have in your project. You'll also see in the build/default directory all the files you'd need to copy/paste to use the component elsewhere.
If you do have x-browser expectations, you can solve them fairly easily by using the polymer build --compile command. This will create slightly more complex embed code to manage either side of the ES5/6 capability boundary and will look something like:
<script>!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);</script>
<script>if (!window.customElements) { document.write('<!--'); }</script>
<script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!--! do not remove -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
The <!--! do not remove --> part is super not kidding and it integral to making sure the compiled code works in ES6 environments.
Beyond that, there is a whole world of things that you can do to tune this up for production deployment. I'd research https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build and https://www.polymer-project.org/2.0/docs/tools/polymer-json to get a better handle on that.
Re polymer build "This command is for app projects only." (https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build)
Also, shell is required. See https://www.polymer-project.org/2.0/docs/tools/polymer-json#shell.
I'm new to Foundation and trying to figure out why I can't call any of the Foundation.utils functions within my document. If I type Foundation.utils.random_str(6) into the javascript console I get the desired result, I have this code before body closes any suggestions?
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
$(document).ready(function(e) {
alert(Foundation.utils.random_str(6));
//alert('ready');
});
</script>
I read the Javascript Utilities documentation for Foundation 5.0.3 and it specifically states:
As long as foundation.js has been loaded into the page, you can
access any of the Foundation utilities by calling
Foundation.utils.{function_name}.
I also couldn't get it work so I dug into foundation.min.js and found the random_str function, but there is not a reference to utils anywhere in the file.
I then tried just alert(Foundation.random_str(6)); after my $(document).foundation(); and got it to work. Here is the smallest codepen I have ever made http://cdpn.io/yfpmb to demonstrate it.
I hope that helps.
for the automated generation of pdfs from the page content I want to use the renderWith function within onAfterWrite in the Page Class (later with DOMPDF the PDF will be generated from the returned HTML):
public function onAfterWrite() {
parent::onAfterWrite();
$this->renderPdf();
}
public function renderPdf() {
return $this->renderWith(array('Pdf'));
}
There is always this Error returned when saving the Page: None of these templates can be found in theme 'mytheme': Pdf.ss
The Template exists for sure and calling the Function renderPdf via a Template works perfectly. This is a bit weird. (ss 3.1.1)
many thanks,
florian
EDIT: maybe it is related to 3.1, I just tested in 3.0.5. without any issues. In a clean 3.1.2 install I was able to reproduce the error.
Where is your template located exactly?
Have you tried to put it under the 'templates' folder, and not under 'Layout' or 'Includes'?
In your case, I would try to move that file here:
/themes/mytheme/templates/Pdf.ss
As you are calling for a standalone template (so not alongside 'Page' for example), the .ss file should be accessible as a 'root' template, as opposed to a layout template.
I have created an application which has its own set of dojo widgets. I have created a custom dojo build to pack all my library in a single dojo file.
The file has a mix of AMD and non-AMD classes. In fact just one AMD class. I am using dojo 1.7.4 for building although the runtime server is using 1.7.2. I have parseOnLoad=false. This is a must for my WebSphere Portal runtime.
The library has a set of declare, define, provide ... something like:
require({cache:{
'com/gnf/class1':function(){
// wrapped by build app
define("com/gnf/class1", ["dijit","dojo","dojox"], function(dijit,dojo,dojox){
dojo.provide("com.gnf.class1");
dojo.declare("com.gnf.class1", null, {
});
(function(){
if( com.gnf.class1.instance == undefined ){
com.gnf.class1.instance = new com.gnf.class1();
}
})();
});
},
'com/gnf/class2':function(){
// wrapped by build app
define("com/gnf/class2", ["dijit","dojo","dojox","dojo/require!com/ibm/btt/util/I18nUtil,com/ibm/btt/util/StringUtil"], function(dijit,dojo,dojox){
dojo.provide("com.gnf.dijit.class2");
dojo.require("com.gnf.util.class3");
dojo.require("com.gnf.util.class4");
dojo.declare("com.gnf.dijit.class2", null,{
}
...
}});
define("com/gnf/app/app", [], 1);
I then include this generated js file in my JSP page using
<script type="..." src="/js/app.js"> </script>
The file is loaded and I can see by using Firebug that the code is executed stoping in each declaration. But, no innner code is executed.
In the end, my set of classes is not available and I receive "class not found" error messages.
Any ideas? How should I load my library? Is there something missing?
Thanks in advance.