I'm trying to implement drag and drop using this tutorial. In this tutorial i have to create a refs like this list = createRef<RecyclerListView<any, any>>() (line no 55), which is giving me syntex error: unexpected token. What i understand is that, they are using .tsx extension (don't know what for) but i'm using .js extension, which maybe the reason why this code not working in my end, and not finding any solution of that. Can anyone help me out on that? Thank you
.tsx extension is for Typescript files. Javascript is not a typed language. To put it simply, Typescript was built to make Javascript look like a typed language. Whatever you put in <> after createRef, specifies the type of the ref that is being created and you can only use types in Typescript files (.ts and .tsx). If you want to move to Typescript, you'll have to do some setup and change your file extensions to .tsx. Otherwise, if you'd like to stay on .js, just ignore the types in the tutorial and instead write list = createRef().
Related
I'm creating an add-in for Excel. I'm using the Typescript/React framework.
I want to be able to jsut use console.log however this has proven to be difficult, and so I'm resorting to using console.re.
This ultimately comes down to doing the following:
Include <script src="//console.re/connector.js" data-channel="YOUR-CHANNEL-NAME" id="consolerescript"></script> in your head tag
run console.re.log("My Message")
and then it should appear in the browser under your channel name (I used the correct channel name, that wasn't the issue).
However, no matter what I try I can't get it to stop complaining about TS2339: Property 're' does not exist on type 'Console'.
I'm not sure if I need to extend the type definition or what, and if so, how can this be done properly?
This can be solved quite easily by adding the following snippet to global.d.ts
interface Console {
re: any;
}
Then, in your application you can use something like:
var con = console.re;
con.log("This should work!")
Im attempting to update an old version of the selenium-tcl package to work with the new W3C WebDriver (or Selenium 4.0).
Original packages uses a few mixins for the webdriver class.
So I modeled what I saw and created a mixin file named mixin_action_chains.tcl [1] which has a mixin class called Mixin_Action_Chains.
Whenever I attempt to use it I get the error:
% package require selenium
::selenium::Mixin_Action_Chains does not refer to an object
Im not sure why I've modeled it pretty much exactly as I have seen in the other files such as mixin_for_scrolling.tcl [2]* file. What am I missing.
Here is the entire GitHub Repo
Im not sure what else must be done for TclOO. Any thoughts.
Thanks
Im not sure what else must be done for TclOO. Any thoughts.
Update
pkgIndex.tcl: The placement of the mixin-defining script mixin_action_chains.tcl is wrong, it comes after the mixin has already been required in the previously sourced script webdriver.tcl, like entering directly:
% oo::class create C {
mixin ::not::defined
}
::not::defined does not refer to an object
You need to change the order of source command calls in the package ifneeded script.
For the records
Still, in the original version, there were unbalanced curly braces and brackets in your script, which broke sourcing of the file for me:
https://github.com/SavSanta/w3cselenium-tcl/pull/1
My spacevim config file: init.toml
[[layers]]
name = "lang#javascript"
auto_fix = true
enable_flow_syntax = true
To get Vim to support a certain syntax, it has to be given the relevant .syntax file. This can be done manually, or by installing a plugin that loads it for you.
I've never used SpaceVim (I used SpaceMacs once, a couple eons ago), but looking through its documentation, the [[custom_plugins]] section looks promising. I've mocked up an example to get you started:
[[custom_plugins]]
name = "MaxMEllon/vim-jsx-pretty"
merged = false
However, this method will only yield limited results. This will only get Vim to recognize the syntax and highlight accordingly; if you want full linting capability, it looks like this GitHub user created a script to modify the bootstrap#after section of SpaceVim to use ESLint, which supports JSX. Note that you have to have ESLint installed for that to work.
For anything this "extreme", it looks like modifying the bootstrap.vim file is the only real way to go. In case you ever want to do further customization outside of SpaceVim defaults, I highly recommend getting Vim/neovim and installing the plugins yourself.
I'm trying to include localization into my npm-react-module, but I have failed receiving the value for the corresponding key from the Langugage.properties file. It simply returns the key. I did some research but I couldn't find any source that would help me solve my problem.
In the code which I will show you bellow, I have included a Language.properties file into my module. In my portlet, I have included the needed configuration for the language properties. I have also tried to add a separate file for a specific locale, but that didn't help me either.
This is an example of my portlet configuration:
"javax.portlet.resource-bundle=content.Language"
This is an example content from my Language.properties file:
example-key=example-value
This is how I'm trying to access the value in my React Component:
<h1> {Liferay.Language.get('example-key')} </h1>
But it only returns "example-key" instead of "example-value".
In my view.jsp file I am able to retrieve the corresponding values using
<liferay-ui:message key='example-key'/>
I have tried this method: https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/localizing-your-portlet but it didn't work either. Did anyone get this to work properly in their npm-react-module? I really don't want to spend time implementing my own localization service. Thanks!
Liferay.Language.get('key') gets text replaced by the build mechanism. Therefore there is no actual object/class to do this. I have been trying to get this to work myself and have resolved that I will have to do internationalization on my own.
localizing is done only in build time meaning if you have a language
key that generated dynamicly , you can't localizate it or for example
if you get a key from api fetch and need to localizate it, you can't
beacuse Liferay localization method for react (
Liferay.Language.get("yourLanguageKey") ) its undefined in runtime and
you can't use it.
from: https://npm.io/package/liferay-react-runtime-localization
I'm getting this error in an almost empty react component:
"[ts] Unterminated regular expression literal."
import * as React from 'react';
export default class EmptyComponent extends React.Component {
render() {
return (
<p>Hello</p>
);
}
}
I don't know what I'm doing wrong!
It turns out I was using the .ts file extension instead of .tsx
Make sure your component file extension is .tsx (if you're using Typescript) or .jsx (if you're using Javascript).
So my case was a bit unique. I had the same error message. but everything got fix after I restarted the build process (e.g. in this case I was working with storybook, so npm run storybook). The symptom was that, even I changed my file name to be .tsx the error still reporting the same file as .ts. That reminded me that I changed the file name when the build is already watching and running. That's when I decided restart the build command and wolaa! everything fixed itself.
Sometime its just that --- "Have you turn it off and on again?"
Just in case someone else runs across this and has named their file appropriately, re-inspect your regex to make sure you haven't accidentally created an invalid regex. For example, mine looked like:
/^https?:\/\/
and it should have been:
/^https?:\/\//
^ left this lil' guy off
You can also use an online regex tool to make sure you've created a valid regex.
I'm using WebStorm. The file is a .tsx file and turned out that after I close the file and re-open the file again, the issue is gone itself.