by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Benjamin Lee
    @UnHumbleBen
    VsCode
    So looking back at my code snippet, does the doSomethingfunction get associated with the parameters I passed into the @Todo annotation somehow?
    Keal Jones
    @kealjones-wk
    This i a bit advanced but might shed some context to how the AST sees this meta data: if you have the dart extension then you can hit CMD+P then type > and click "Dart: Open Analyzer Diagnostics", then click "Contexts" on the page that opens and scroll down to the files under "Context files" and click "ast" link next to the file you have the annotation in.
    Screen Shot 2019-12-01 at 7.30.54 PM.png
    Keal Jones
    @kealjones-wk
    You will see something like i have in that screenshot. and you can see my function declaration myFunction and how it has nested a AnnotationImpl of my TestAnnotation within the function :) so yes, the AST does associate them and the function ast now has the "metadata" that you provided in the annotation.
    Benjamin Lee
    @UnHumbleBen
    I see, so using this metadata, OverReact's builder can generate the boilerplate code for components, props, etc...?
    Keal Jones
    @kealjones-wk
    yep exactly, because each piece is annotated, we are able to find each piece and associate the props and the component in order to generate the factory.
    and the @Component2() annotation has additional meta data that helps us build the component with special features like isErrorBoundary and isWrapper etc to change how we put the component together behind the scenes.
    Benjamin Lee
    @UnHumbleBen
    What exactly is a "factory"? I couldn't find any good documentation on this term either. Is it related to the Dart's factory keyword or is OverReact's factory a different?
    Keal Jones
    @kealjones-wk
    I had a similar confusion with I first started using OverReact but OverReacts @Factory Doesn’t have anything to do with the factory Keyword in dart. In OverReact a Component Factory is a function you use in your render method to set the props and children of a component and when invoked calls reacts createElement Behind the scenes, it’s similar to how JSX works in JavaScript world.
    Benjamin Lee
    @UnHumbleBen
    Where can I find the code for OverReact's builder? I just want to get an idea of how it reads the annotations and generates code
    the OverReact team has plans to update the builder to allow for a new boilerplate sometime tin the future that will make it possible for over react code to be a bit cleaner :)
    Benjamin Lee
    @UnHumbleBen
    Great! Thanks so much!
    Benjamin Lee
    @UnHumbleBen
    dart-overreact.png
    Any idea why I am getting undefined errors in the Workiva/over_react#439?
    Target of URI doesn't exist: 'package:todo_client/todo_client.dart'.
    Try creating the file referenced by the URI, or Try using a URI for a file that does exist.dart(uri_does_not_exist)
    The function 'ConnectedTodoApp' isn't defined.
    Try importing the library that defines 'ConnectedTodoApp', correcting the name to the name of an existing function, or defining a function named 'ConnectedTodoApp'.dart(undefined_function)
    Benjamin Lee
    @UnHumbleBen
    Apparently, this can be fixed by reloading the static analyzer. How does one do that on VS Code?
    Benjamin Lee
    @UnHumbleBen
    Actually I do not think reloading the static analyzer fixes this issue.
    Benjamin Lee
    @UnHumbleBen

    In the simple store [example] (https://github.com/Workiva/over_react/blob/CPLAT-6104_over_react_redux_example_app/web/over_react_redux/examples/simple/store.dart) the comment on Action reads

    /// An action class can be created to add typing to the actions passed into dispatch.
    ///
    /// While it can make life easier, this practice is optional as all as the
    /// reducer receives a valid type and value parameter.

    I believe there is a mistake here because "as all as" is hard to understand. Why exactly is it optional to make an action class? Is it because Dart is a typed language?

    Benjamin Lee
    @UnHumbleBen

    I am also confused about the use of brackets in the constructors, why in the same example there is a constructor that reads

      CounterState({
        this.smallCount,
        this.bigCount,
        this.name,
      });

    Is there a reason why we can't just write

      CounterState(
        this.smallCount,
        this.bigCount,
        this.name,
      );
    Keal Jones
    @kealjones-wk
    For the constructor question: yes we could technically do the seconds but that makes all the arguments “required” and the server would get angry if one isn’t supplied,
    By wrapping the arguments in braces, we make them “named, optional” arguments, meaning we only need to provide the ones we want and the rest will be null (or if you have a default value, this example doesn’t, then that value)
    @UnHumbleBen as for the action class question, I think the comment was written more for users coming something like w_flux that has an `Action
    class built into it.
    Keal Jones
    @kealjones-wk
    what the comment is trying to clarify is that the base Action class is not required, each action can totally be their own, unique classes and do not need to have any type of matching inheritance if you do not want, we do in the example because it made sense for us.
    As for restarting the analysis server, the dart extension in vscode doesn’t offer one (it’s annoying), but a workaround is to run the build, then if you have multiple versions of dart setup in vscode settings you can switch the a different version then switch back which reloads the server, I know it’s not great but it’s what I’ve been doing, or you can simply close and open vscode and it should reanalyze
    Keal Jones
    @kealjones-wk
    That comment about the action class should probably say “as long as”
    Benjamin Lee
    @UnHumbleBen
    Yes, I already tried restarting the analysis server to fix the undefined error in the example (Workiva/over_react#439) but it didn't work. Any other possible fixes?
    Benjamin Lee
    @UnHumbleBen
    Another question: I am getting this warning when using redux_dev_tools:
    backend.js:6 OverReactReduxDevToolsMiddleware [WARNING]: Unknown type:START
    r @ backend.js:6
    warn @ dart_sdk.js:99627
    (anonymous) @ middleware.dart:33
    runUnaryGuarded @ dart_sdk.js:32012
    [_sendData] @ dart_sdk.js:26511
    [_add] @ dart_sdk.js:26459
    [_sendData] @ dart_sdk.js:27142
    add @ dart_sdk.js:26949
    [_publish] @ logging.dart:240
    log @ logging.dart:190
    warning @ logging.dart:217
    handleEventFromRemote @ middleware.dart:124
    (anonymous) @ VM578:1
    (anonymous) @ VM578:1
    (anonymous) @ VM578:1
    x @ VM578:1
    postMessage (async)
    (anonymous) @ content.bundle.js:1
    Keal Jones
    @kealjones-wk
    @UnHumbleBen run webdev serve -- --delete-conflicting-outputs then restart your IDE, that should stop the errors your seeing, it needs to build the components generated files.
    Benjamin Lee
    @UnHumbleBen

    Is there a way to configure VS-Code Debugger to run

    pub run build_runner test -- -p chrome test/reducer_test.dart

    instead of the default

    pub run build_runner test

    I want to make some unit tests, but it is tedious to debug without the ability to step through code.

    Benjamin Lee
    @UnHumbleBen
    I found how to run VS Code Debugger on browser, but the problem now is running build_runner to compile over_react
    Aaron Lademann
    @aaronlademann-wf

    @UnHumbleBen not sure what you mean about it being a problem to run pub run build runner build to compile over_react?

    Also - the easiest way to debug tests, IMO, is to add the --pause-after-load argument - which will allow you to open the dev tools in the browser to inspect stuff / set breakpoints, etc...

    pub run build_runner test -- -p chrome test/reducer_test.dart --pause-after-load
    Benjamin Lee
    @UnHumbleBen
    @aaronlademann-wf Thank you so much! This is exactly what I was looking for! Is this --pause-after-load option documented anywhere? I looked inside of the build_runner documentation could not find a list of options.
    Aaron Lademann
    @aaronlademann-wf
    its a test option... the -- bit of the command is not passing commands the build_runner - its passing it to the test sub-process: https://pub.dev/packages/test#debugging
    so all the arguments essentially - are test package arguments... including -p chrome, the specification of the test file, and the --pause-after-load flag.
    Benjamin Lee
    @UnHumbleBen

    Any suggestions for how to set up Github Actions for running tests with OverReact? Currently I am using the default Github Action for Dart, with a tweak in the run command so that it runs with the build_runnerand -p chrome flag instead of the default pub run test command.
    dart.yml

    name: Dart CI
    
    on: [push]
    
    jobs:
      build:
    
        runs-on: ubuntu-latest
    
        container:
          image:  google/dart:latest
    
        steps:
        - uses: actions/checkout@v1
        - name: Install dependencies
          run: pub get
        - name: Run tests
          run: pub run build_runner test -- -p chrome test/reducer_test.dart

    I am currently getting this error:

    Failed to load "test/reducer_test.dart":
      Failed to run Chrome: No such file or directory
        Command: google-chrome --user-data-dir=/tmp/dart_test_SZPQPB http://localhost:37967/lJIhfSufuYkTMb1do9d%2FMxrLR0zQEKVC/packages/test/src/runner/browser/static/index.html?managerUrl=ws%3A%2F%2Flocalhost%3A37967%2FlJIhfSufuYkTMb1do9d%252FMxrLR0zQEKVC%2F0&debug=false --disable-extensions --disable-popup-blocking --bwsi --no-first-run --no-default-browser-check --disable-default-apps --disable-translate --disable-dev-shm-usage --headless --disable-gpu --remote-debugging-port=0.

    Not sure what to make of it as I never encounter this error on my machine (ubuntu).

    David Doty
    @dave-doty

    How can I set an initial state of a stateful component based on a prop (not the default prop value, but the actual one used to create the component)?

    In the ReactJS documentation it recommends setting in "the constructor", but OverReact doesn't use constructors in the same way as ReactJS. I tried accessing the prop in the getter initialState, but the props have not been set by that point.

    joebingham-wk
    @joebingham-wk
    Hi @dave-doty, when you say that the props have not been set at that point do you mean that you tried to do so and the value came through as null or the default value? Because using the initialState getter is the correct way, so I'd have expected that to work
    David Doty
    @dave-doty
    @joebingham-wk Sorry, I made a mistake in debuging, and the prop was actually set.
    Benjamin Lee
    @UnHumbleBen
    Any suggestions for setting up CI for testing OverReact? I am having issues with Github Actions, which seems to have difficulty running chrome platform (which OverReact component requires to build properly)
    joebingham-wk
    @joebingham-wk
    Hi @UnHumbleBen, I apologize for being slow to respond - I'm not really experienced with setting up CI workflows, but I did get a chance to poke around a bit this morning. Locally I don't have an issue using pub run build_runner test -- -p chrome [relative-file-path]. Going with what I can see, your error says that the reducer_test.dart doesn't exist. Have you verified that path is correct?
    Benjamin Lee
    @UnHumbleBen
    I think there might be a breaking change from the update from 3.1.7 to 3.2.0 All of my component tests have this error:
      Bad state: getInstance() is only supported when the rendered object is a composite (class based) component. If you are rendering a function component, and are trying to:
    
      1. Access an instance rendered by the function component: use `forwardRef` to pass refs through the tree.
      2. Access / query for a DOM node rendered by the function component: try using
          queryByTestId(jacket.mountNode, yourTestId)
      dart:sdk_internal                                              throw_
      package:over_react_test/src/over_react_test/jacket.dart 115:7  getInstance
      connected_edit_mode_test.dart 42:50                            <fn>
    The line in question is:
       setUp(() {
          utils.initializeTestStore(initializeTestState());
          var testJacket = mount((ReduxProvider()..store = app.store)(
            (ConnectedEditMode()..addTestId(EditModeComponentTestID))(),
          ));
    
          component = getComponentByTestId(testJacket.getInstance(), EditModeComponentTestID);  // this line throws the error
          expect(component, isNotNull, reason: 'ConnectedEditMode should be mounted');
        })
    Dustin Graham
    @dustin-graham
    Is anyone here know if there are any automated tools used to wrap the JS library? I'm doing some server-side Dart on top of a node JS interop library. I need to use another JS library and I will have to wrap it like the other libraries I'm using. But it looks like a tedious process at best unless there is some sort of automation. Does anyone know the process that the dart react library authors use to make this lib?
    Aaron Lademann
    @aaronlademann-wf
    None that I'm aware of @dustin-graham
    David Doty
    @dave-doty

    I'm wondering if there will be any issues with Dart 2.9's new null safety and OverReact props fields. In particular, I've always wondered if there is a way to ensure that a prop is set to a non-null value. Currently, if one declares a prop field (e.g., named field2) but then forgets to set it when creating the Props object via

    return (MyComponent()..field1=value1)();

    then field2 will simply silently take on the value null.

    Aaron Lademann
    @aaronlademann-wf
    @dave-doty it doesn't use any of the null safety features, but you can specify a required, non-nullable prop by annotating it with @requiredProp. This will tie into React's propTypes runtime check and emit an error to the browser console. While it won't produce build errors, this is how we currently communicate non-nullable props in the Workiva component ecosystem.
    mixin MyComponentProps on UiProps {
      @requiredProp
      dynamic field1;
    }