React has the concept of refs. Is there a similar concept in Preact that can be used without preact-compat?
I want to be able to reference elements in Component methods without a DOM look-up.
Thanks!
Instead of passing a string, you will pass a function. For example, you would render a component with ref as follows.
<Slideshow ref={slideshow => this.slideshow = slideshow} />
This means that you can now access it with this.slideshow.
As of Feburary 2016, the core Preact package supports callback refs, so you should be able to follow along with the docs that you linked.
One thing that is explicitly not supported in the core library is string refs. They have been deprecated in React for a while now and are likely to be removed, so Preact didn't implement them to begin with. If you have a need for string refs (you probably don't, unless you're using an old third party library), preact-compat supports them.
For more info, see issue #50 on Preact's GitHub.
Related
I had liferay 7.0, when you open the ispect ( Ctrl + Shift + I) then go to the console and write
for english
Liferay.Language.get('login');
"Login"
german language
Liferay.Language.get('login');
"Anmelden"
But Now when I upgraded to Liferay 7.4 , I get
for english
Liferay.Language.get('login');
"login"
german language
Liferay.Language.get('login')
"login"
The issue has been reported
https://issues.liferay.com/browse/LPS-123191?page=com.atlassian.jira.plugin.system.issuetabpanels%3Aall-tabpanel
https://help.liferay.com/hc/en-us/articles/4403607020813-Liferay-Language-get-method-is-no-longer-working-with-string-variables-as-of-DXP-7-3
From one of the comments in the tickets that you've linked yourself:
That option was deprecated under LPS-113569 and is no longer available. You can get some extra information in the pull request deprecating such functionality:
Liferay.Language.get is replaced by the language filter and we also want to remove the AUI dependency, so in this change, we migrate the Liferay.Language.get function to frontend-js-web.
Note that the migrated version is dumbed down to just return the key: it does not preserve the dubious fallback behavior of the old implementation, that used a deprecated synchronous request to the server to fetch the value, which would produce a console warning, and very likely end up returning the key anyway (unless the corresponding value happened to be in the kernel); in short, the old implementation only wallpapered over a real problem (failure of the filter to do its actual job).
One of the linked issues is about updating the documentation, which hasn't happened yet.
Edit, following your comment:
The documentation that you link in your comment looks like the not-yet-updated documentation.
In general, I've confirmed your statement (which wasn't a question, by the way): Indeed, the feature you've been using has become less and less useful (as it was only good for a few translations from core, never from any module, and retrieved them in a performance-killing way. It's not possible to extend it to retrieve all modules' keys and do so in a performant manner, so you should use whatever technique the libraries you're using to translate your frontend are using)
In case you're building your UI with JSPs, that would be <liferay-ui:message key="your-key-of-choice"/>. In other cases, you know what you're using, and that framework definitely has means of providing localization.
yes, this is true it does not work anymore, as Olaf Kock said , you need to implement a new way to localize javascript , there is a npm tool for this #clavis/translation-transformer
Anyone that can point to any documentation on howto reuse code in lit-element.
The problem now is that if I declare an element, in my case a close-button and I want to reuse it by importing it into 2 or more lit-elements, there will be an error in the browser about the close-button being declared more than once.
Understandable enough, but how do I reuse a component, I could of course move the button to a separate file and add it to the document, but then there would be dependencies on that for other components to work.
Any suggestions
If close-button self-registers itself, with a call to customElements.define('close-button', ...), then you should be able to import its defining module and not have any errors due to the module caching behavior of JS.
You must have multiple customElements.define('close-button', ...) calls, so I'd make sure that 1) it's self-registering and you're not registering it again in each component that uses it, and 2) you're using standard JS modules.
After investigating a bit more, I concluded that sharing HTML templates might be the way to do it.
What I want to do is really similar to this and this except I'm trying to figure out how to put an ArrayExtension inside a module.
I'm trying to get something similar to the way C# extension methods work, that way I can just import the module and I'll have my extra methods. The links I provided show how to extend an existing object, but I haven't been able to figure out how to encapsulate that into a module.
If you're targeting non-browser environments like node.js this will be possible because you will be able to pass references to your module's global members, such as Array, to other modules. Those other modules can then extend the passed in object and/or its prototype with extra functionality which will be only accessible by the calling module. Other modules would have to do the same in order to get these extensions; therefore, conflicts are minimized since imports are explicit.
However, in browser environments this is not the case since there is only one window object and any changes to its members are available everywhere. As soon as any of your modules extended Array those extensions would be available to all other modules -- increasing the possibility for conflicts and making the code harder to reason about.
With that said, there are patterns in JS, and therefore TypeScript, which should accomplish what you want. One such pattern is the 'mixin' pattern which allows you to add on extra functionality on an object instance basis. You could separate re-usable code into mixin modules which could then be applied to an object when needed, or even automatically in constructors. Take a look at this for a decent overview and implementation examples: http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/
If you're trying to extend the built in Array type you can't do that within a module. You're extension will need to live in an ArrayEx.ts file and occur outside of any modules. The reason for that is that if you did it within a module you'd be extending the Foo.Array type which isn't the same as Array.
But you said you just want to be able import the module to have your extra methods show up and all you really need to do is add a /// <reference path='ArrayEx.ts' /> to any file you want the extension methods to be available to. This is essentially the same thing.
Using GEB I was using the Page Object Pattern to encapsulate information about the different pages statically.
I then refactored my GEB code to be used from a separate class so I could encapsulate common commands using method calls.
For example I would have a method login() which will call the appropriate GEB code to login to the website that I am testing. I would then have other common functions using method calls on a TestHelper class.
I wanted to move these common functions to the Pages that they act upon. For example a search page would have a search method, the login page would have the login method. This way I can build a library of pages which have all the common functionality on them for use across multiple GEB projects. Now to do this each page must have a handle on the geb.Browser therefore I would now have to instantiate each page in the test setup. By doing so I am no longer able to use the standard page object pattern.
to ReviewQueuePage
assert at(ReviewQueuePage)
The code above will throw a null pointer as the object is no longer able to be accessed in a static manner meaning I had to change the code to
go ReviewQueuePage.url
This removes all the functionality of using the class as a Page.
Does anyone have any solutions for encapsulating the data for each of the pages in way that it doesn't cause the pages to act differently.
This resource maybe of interest to you. http://adhockery.blogspot.com/2010/11/encapsulating-page-state-and-actions-in.html. It also has examples in git.
This also might be useful Passing state between pages when using geb & spock
I'm a bit confused. Are you looking for a way to share common code among multiple pages? This is the impression I get after reading your question several times, but I'm not quite sure. You mentioned "common functions". Well, common components can be encapsulated using Module objects. In each page that uses a common component, simply reference the module object in the page object.
I want to add a calendar control to a page that already includes Prototype and Scriptaculous. Not happy with any of the Prototype ones I could find, I'm considring using the YUI Calendar widget.
I this likely to cause any problems?
We have worked hard to make sure that YUI is safe to use with any other library. We namespace everything, as HermanD says, under only one required global (YAHOO) and one optional one (YAHOO_config). We don't modify native objects. And even though Protoype does modify native prototypes, we code defensively so that this doesn't break YUI functionality.
If you find any bugs in using the two together, please let us know.
Regards,
Eric
YUI Team
By default everything in YUI is within the YAHOO namespace, so as long as you sensibly apply namespaces to anything you use from YUI, I would have thought you should be ok.
See: http://developer.yahoo.com/yui/yahoo/
I successfully used the YUI tab control in an app I was already using Prototype and Scriptaculous in and had no problem. The weight of all that is a bit much though if you're looking at a publicly available app. I wouldn't care so much about an internal app, say for a company, but you might want to think about how much JavaScript you're making end users download and the number of separate files they're having to download for the page.