Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

getDefaultProps() breaks the native class model of Ember Components. #183

Open
ariesshrimp opened this issue May 11, 2019 · 1 comment
Open

Comments

@ariesshrimp
Copy link

BUG REPORT

  • [ x ] I have ensured that the issue isn't already reported
  • [ x ] I have confirmed that the issue is reproducible with the latest released version
  • [ x ] I have deleted the FEATURE REQUEST / CODE CHANGE section

Summary

getDefaultProps() breaks the native class model of Ember Components.

Expected Behavior

class Example extends Component {
  layout = hbs`<p>{{this.example}}</p>`
  propTypes = {
    example: PropTypes.string
  }
  getDefautProps() {
    return {
      example: "this string should be set as the value of this.example"
    }
  }
}
{{-- <p>this string should be set as the value of this.example</p> --}}
<Example/>

{{-- <p>something else</p> --}}
<Example @example="something else"/>

Actual Behavior

{{-- TypeError --}}
<Example @example="something else"/>
prop-types.js:112 Uncaught (in promise) TypeError: defaults.forEach is not a function
    at Example.init (prop-types.js:112)
    at Example.superWrapper (utils.js:366)
    at Example.init (component-prop-types.js:21)
    at Example.superWrapper [as init] (utils.js:366)
    at initialize (core_object.js:87)
    at Function.create (core_object.js:684)
    at FactoryManager.create (container.js:545)
    at CurlyComponentManager.create (glimmer.js:5437)
    at Object.evaluate (runtime.js:1494)
    at AppendOpcodes.evaluate (runtime.js:70)

Possible Solution

Steps to Reproduce

https://codesandbox.io/embed/54ojpz0rox

ember new my-app -b @ember/octane-app-blueprint
cd my-app && ember install ember-prop-types
# add component as shown in above examples
ember serve # runtime error in browser

  • [ x ] Include the contents of your package.json file
  • [ x ] Steps to reproduce:

Context

I want type checking of props passed to my components in templates. Static type checking is not there yet for ember templates. So it's gotta be run-time. But I don't want to be forced to choose between run-time checks and class syntax

Environment

  • [ x ] I am using the latest released version (can check with npm ls <package-name>)
  • I am using these browsers:
    • [ x ] Latest Chrome
  • [ x ] My version of Node is: v10.15.2
  • [ x ] My version of npm is: 6.4.1
  • [ x ] My OS is: linux-gnu
  • [ x ] Include the contents of your package.json file
@EWhite613
Copy link
Contributor

We moved off this in native class model as we just use typescript to define the interface and

class Example extends Component {
  layout = hbs`<p>{{this.example}}</p>`
  @argument example: string = "this string should be set as the value of this.example"
}

and the glimmer approach is to go through args so we have something like

interface ExampleArgs {
  example: string
}
class Example extends Component<ExampleArgs> {
  layout = hbs`<p>{{this.example}}</p>`
  example: string

  get example (): string {
  return this.args.example ?? 'this string should be set as the value of this.example'
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants