Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Oct 05 11:14
    codecov[bot] commented #3090
  • Oct 05 11:12
    codecov[bot] commented #3090
  • Oct 05 11:02
    codecov[bot] commented #3090
  • Oct 05 11:01
    daniel-stoian-lgp synchronize #3090
  • Oct 05 11:01

    daniel-stoian-lgp on WRO-12371

    lint warning fix (compare)

  • Oct 05 10:56
    codecov[bot] commented #3090
  • Oct 05 10:50
    codecov[bot] commented #3090
  • Oct 05 10:49
    daniel-stoian-lgp synchronize #3090
  • Oct 05 10:49

    daniel-stoian-lgp on WRO-12371

    increased code coverage for ui/… (compare)

  • Oct 05 08:53
    codecov[bot] commented #3090
  • Oct 05 08:50
    codecov[bot] commented #3090
  • Oct 05 08:32
    codecov[bot] commented #3090
  • Oct 05 08:31
    adrian-cocoara-lgp synchronize #3090
  • Oct 05 08:31

    adrian-cocoara-lgp on WRO-12371

    code review fixes (compare)

  • Oct 05 07:30
    adrian-cocoara-lgp commented #185
  • Oct 05 07:30
    adrian-cocoara-lgp closed #185
  • Oct 05 06:57
    daniel-stoian-lgp commented #3090
  • Oct 05 06:35
    daniel-stoian-lgp commented #3090
  • Oct 04 15:39

    stanca-pop-lgp on WRO-12383

    undo test (compare)

  • Oct 04 15:18
    codecov[bot] commented #3090
Eric Blade
@ericblade
oops my fork of cli is 4.1.6, fork of dev-utils is 4.1.3.
Eric Blade
@ericblade
enact -v reports 4.1.7, tsc -v reports 4.6.2, and then the npm run pack-p fails on all lines of code that use the new import { type ... } introduced in .. 4.5 https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names
Eric Blade
@ericblade
and the only change i make between one working and one not working is the 'npm install -g @enact/cli' versus the 'npm install -g ericblade/cli#dev' ..
Seungho Park
@seunghoh
@goodev2021 I recommend you to read & follow enact tutorial page https://enactjs.com/docs/tutorials/introduction/ and you can also see the tutorial samples in the github https://github.com/enactjs/samples/tree/develop/sandstone
Don't worry that you are new to enact, if you are familar with react, then you won't have any problem :)
Juwon Jeong
@juwonjeong

so setting functional: true does get past the initial "you can't use a hook here" problem, but then it triggers: Line 25:30: React Hook "useSelector" is called in function "render" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

@ericblade, we looked into the above issue. uppercase letter issue occured with the property name("render") in kind.
It seems that the kind() method needs an update.
I think we should disable the react-hooks/rules-of-hooks eslint rule to use hooks in kind for now.

Eric Blade
@ericblade
👍
goodev2021
@goodev2021
I come across a nice project - https://github.com/simon987/sist2 and just for reference
chuhotay-dev
@chuhotay-dev
Hi guys, how can I install Enact app on a target device, such as the emulator or webOS TV? Are there any guides related?
You can use several ways to install the app like using VS Code, CLI etc. Please refer to the Tools reference doc https://www.webosose.org/docs/tools/
chuhotay-dev
@chuhotay-dev
@seunghoh great, thanks bro
Bé Mỡ
@BeGao1605
Hi all, I'm a beginner
Please help me explain why EnactJS is framework but ReactJS is library
And please tell me the difference between EnactJS and ReactJS
frannceskka
@frannceskka
Hello guys. I am trying to develop an app. It runs fine on Tizen, but when I install it in LG TV it only shows a black screen and nothing else. Can you help me?
Seungho Park
@seunghoh
hi @frannceskka we need more information. do you have any error or warning message? How did you installed the app into the webOS TV? Which Enact version do you use? Which webOS version of your TV etc.
frannceskka
@frannceskka
Hi @seunghoh I package the app through the VS code extension webOS TV. I also tried ares-package dist. I do not get any error message, the app gets installed on the tv. I am using enact v4.0.0 but i also tried downgrading to v3.2.7 and the same thing happens.
Tv software vesrion is 05.40.26
I tried enact pack as well as enact pack -p
Seungho Park
@seunghoh
hm.. my question is that you saw only black screen when started app. I suspect that there might be some error. Would you please check the console when you see the blackscreen?
frannceskka
@frannceskka
I tried to debug it on TV but it doesnt show any error. the console is empty

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Enact App Template</title>
<link href="main.css" rel="stylesheet"/></head>
<body>
<div id="root"></div>
<script src="main.js"></script></body>
</html>

this is my index.html file
maybe there is some sort of mistake here but i cant find it
Dead-Master
@Dead-Master
Tell me how to make the names of the compiled files unique in the project with enact, that is, there was a hash in the name of css and js
Do you just need to add something to some config or do you need to install additional plugins?
Seungho Park
@seunghoh
Enact CLI doesn't support that feature but you can eject, and edit the webpack config you want.
https://enactjs.com/docs/developer-tools/cli/ejecting-apps/
TranTung110699
@TranTung110699
I can't customize sandstone/RadioItem. How to customize sandstone/RadioItem ?
Seungho Park
@seunghoh
Hi, @TranTung110699
What do you want to do? you can use css prop to customize RadioItem
https://enactjs.com/docs/modules/sandstone/RadioItem/#RadioItem.css
Andy Lee
@hanuz06_gitlab
I setup a standard project with enactjs and want to change components extension from js to jsx but it is not recognized when importing.
4 replies
Seungho Park
@seunghoh
@hanuz06_gitlab Would you be more specific? Enact should work with js, jsx just like React
Ignacio Araya
@socialweb-iaraya
Hey everyone, I have a couple of questions: 1) I'm trying to understand how the spotlight API works and how to interact with the simulator's RCU, but I haven't been able to find any examples unfortunately. Correct me if I'm wrong, but if I create a basic sandstone application with a couple of sandstone buttons, besides adding the SpotlightRootDecorator at the root, what else should I do? Do I need to wrap the buttons inside a spotlight container too, or are they ready to use with spolight? The documentation is a little confusing. Thanks.
Ignacio Araya
@socialweb-iaraya
So far I've done this. I'm having a hard time setting the element focus, because I don't know is this is either Spotlight's responsibility or React's:
handlers: {
    onSpotlightLeft: (ev) => {
        Spotlight.move('left');
        let id = Spotlight.getCurrent().id;
        document.getElementById(id).focus();
    },
    onSpotlightRight: (ev) => {
        Spotlight.move('right');
        let id = Spotlight.getCurrent().id;
        document.getElementById(id).focus();
    }
}
Seungho Park
@seunghoh
Hi @socialweb-iaraya Thanks for the detailed question and sorry about the confused documentation.
Here's the answer
Ignacio Araya
@socialweb-iaraya
Thank you @seunghoh. Once I updated to the latest Simulator and Enact CLI versions everything is working as it should. I was using Simulator version 1.0.0, and the remote seemed to be completely broken. Thank you again for your time.
Seungho Park
@seunghoh
Good to hear that. Thank you @socialweb-iaraya
Andy Lee
@hanuz06_gitlab
Hello, a question regarding Spottable and Panel. Is Panel for the whole page-component and Spottable for wrapping small components like buttons, input windows, etc.?
Seungho Park
@seunghoh
Hi Andy, hm.. I am not sure if I am understanding your question but here the answer.
Panel is the view container. https://enactjs.com/docs/modules/sandstone/Panels/#Panel
Spottable is a HOC to make a control focus-enabled like pointer and arrow key navigation. https://enactjs.com/docs/developer-guide/spotlight/#spottable
Seungho Park
@seunghoh
Hi @hlong0425
Would you be more specific? Which component do you use? (like Sandstone Scroller? Moonstone Scroller?)
What's the user scenario you want but Enact doesn't support?
Lê Hoàng Long
@hlong0425
I use Sandstone Scroller
when the user repeatedly presses the key to scroll. It will have a jerky feeling. How to handle that?
Seungho Park
@seunghoh
hm.. do you have a code snippet? That will be helpful.
There are lots of questions. How do you make your app with scroller. Because Scroller and VirtualLits is the essential Enact component for webOS TV which we support 60fps scrolling with thousands of items.
Anyway here the question.
  1. key to scroll means, do you set focusableScrollabr prop to true for scrolling? https://enactjs.com/sampler/sandstone/?path=/story/sandstone-scroller--scroller
    Scroller actually needs focusable items for scrolling by key.
  2. How many items in the scroller?
  3. What's the scroll mode prop? native or translate?
  4. Did you try with VirtualList? which supports smooth scrolling for many itemshttps://enactjs.com/sampler/sandstone/?path=/story/sandstone-virtuallist--virtual-list
    Last but not least,
    I recommend reading https://enactjs.com/docs/developer-guide/virtual-list-scroller/
Ignacio Araya
@socialweb-iaraya

Hi, I'm having the following problem: I've wrapped two horizontal Scrollers inside a single parent Vertical Scroller. Both Horizontal Scrollers contain a list of cards that extend beyond the viewport's width. The problem is that when I reach the last item of the upmost horizontal Scroller then the focus jumps unexpectedly to an item that's in the horizontal Scroller immediately below.

For example, if both lists have 6 items, when I reach the last item of the first Scroller and press right again it will jump to the 4th item (just an example) of the Scroller below. Is this a glitch or am I missing some setting? I've uploaded a sample prpject here, which reproduces the issue:

https://github.com/postcode-x/enactjs-scrolling-cards
https://github.com/postcode-x/enactjs-scrolling-cards/blob/main/src/views/CardsPanel.js

Thanks in advance.

Seungho Park
@seunghoh
Hi @socialweb-iaraya we'll check and reply soon. Thanks.
sjro
@sjro
Hi @socialweb-iaraya

It is not a bug because spotlight sets focus to the next right item on the dom when a right key event occurs.
If you don't want the focus to go to different scrolling areas, you can set onSpotlightRight and onSpotlightLeft handler on the first and last items of each scroller so that no events are passed.

  • Add the code below to Card.js in your example.

const handleSpotlightRight = (ev) => {
if(props.index == 5) {
ev.preventDefault()
ev.stopPropagation();
}
}

const handleSpotlightLeft = (ev) => {
if(props.index == 0) {
ev.preventDefault()
ev.stopPropagation();
}
}

<SpottableDiv {...props} onSpotlightRight={handleSpotlightRight} onSpotlightLeft={handleSpotlightLeft} onClick={() => handleAlert()} className={css.card}>
{props.index}
<img src={props.image} className={css.cardImage} />
</SpottableDiv>

Ignacio Araya
@socialweb-iaraya
Thank you both @sjro and @seunghoh , it's working like a charm now.
Jacob McCarthy
@Jacobmabob
I’ve created a project for webOS TV using enact and am able to run it on the webOS TV simulator by pointing at the index.html in the dist folder from the appinfo.json, but in order to see my changes I have to run enact pack to create a new build. How do I configure it to work with dev server so I can see my changes updated on save?
Jacob McCarthy
@Jacobmabob
Enact pack —watch is what I’m looking for
taeyoung.hong
@hong6316

Hi @Jacobmabob,
Thank you for asking us.
As you commented, 'enact pack --watch' option rebuilds your project when code changes are saved.
After rebuilding, please reload your app. Then the change results will be shown.

Or, try use enact serve: https://enactjs.com/docs/developer-tools/cli/serving-apps/
This option provides rebuild and reload together.