Commit Graph

7 Commits

Author SHA1 Message Date
Ryan Nowak 354752cf16 Add support for generic-typed components (#1417)
* Add the ability to discover generic types/properties

* Add @typeparam directive

Adds the ability to declare a generic-typed component using Razor.

* Add a 'type parameter' property to generic components

* Adds the ability to consume generic-typed components
2018-09-16 14:01:15 -07:00
Ryan Nowak d4cbb86f46 Add Support for Templated Components (#1404)
* Test namespace cleanup

* Add recognication for RenderFragment in tag helpers

* Remove dead code from node writers

* refactor type check

* Continue to treat child content as a delegate in codegen

* Add extension to enumerate child content

* Reorganize code generation tests

These were growing a bit disorganized, and weren't really result in good
code reuse.

* fix test base class

* Add some child-content tests

* Add an explicit node for ChildContent

Adds a strongly typed node to represent a 'ChildContent' and what it
contains. This allows us to simplify the code generation path,
detect/processes more issues in IR passes, and will be essential for
supporting multiple child content.

* Ignore ChildContent in components when it's just whitespace

* Add diagnostic for duplicate child content

* Add support for explicit child content elements

Precursor to support for multiple child content items

* Add support for multiple child-content elements

* Change delegate signature for RenderFragment<T>

* Clean up Tag Helper constants

* Allow RenderFragment<T> as a child content

* Allow renaming the template parameter

* Improve error message for invalid child content

* Add diagnostic for repeated child content parameter names
2018-09-10 18:59:51 -07:00
Steve Sanderson 4033560734 Support 'ref' syntax for capturing references to elements and components (#685) 2018-04-27 17:41:21 +01:00
Ryan Nowak c3366bc956 Add event handlers as tag helpers
This change adds support for mapping DOM event handlers as tag helpers
that function in a bi-modal way.

This is a new first-class feature for DOM events, and replaces a few
workarounds like using `@onclick(...)` or `click=@{ ... }`. I haven't
removed those things yet, this is a first pass to get the new support
in, we'll remove those things when we're totally satisfied.

When used with a string like `<button onclick="foo" />` the result is
a simple HTML attribute .

But when used with an implicit expression like
`<button onclick="@Foo" />` or
`<button onclick="@(x => Clicked = true)" />` a C# function is bound to
the click event from the DOM.
2018-04-06 13:00:04 -07:00
Ryan Nowak 5b658c80a1 Replace @bind with bind-...
This change introduces a 'tag helper' that replaces @bind with custom
code generation that accomplishes roughly the same thing.

This feature lights up by dynamically generating tag helpers that are
visible to tooling and affect the code generation based on:
- pattern recognition of component properties
- attributes that create definitions for elements
- a 'fallback' case for elements

'bind' also supports format strings (currently only for DateTime) via
a separate attribute.

This change introduces the basic framework for bind and tooling support.
We know that we'll have to do more work to define the set of default
'bind' cases for the DOM and to flesh out the conversion/formatting
infrastructure.

This change gets us far enough to replace all of the cases we currently
have tests for :) with the new features. The old @bind technique still
works for now.

Examples:

@* bind an input element to an expression *@
<input bind="@SelectedDate" format="mm/dd/yyyy" />
@functions {
    public DateTime SelectedDate { get; set; }
}

@* bind an arbitrary expression to an arbitrary set of attributes *@
<div bind-myvalue-myevent="@SomeExpression">...</div>

@* write a component that supports bind *@

@* in Counter.cshtml *@
<div>...html omitted for brevity...</div>
@functions {
    public int Value { get; set; } = 1;
    public Action<int> ValueChanged { get; set; }
}

@* in another file *@
<Counter bind-Value="@CurrentValue" />
@functions {
    public int CurrentValue { get; set; }
}
2018-03-29 22:04:24 -07:00
Ryan Nowak 9549dccc54 Add @page directive
Adds the @page directive and support for specifying routes in components
at compile time.

For now the route is required and must begin with a leading /.
2018-03-14 11:23:43 +00:00
Ryan Nowak a053155ab4 Implement layout and implements with directives
- Remove haxxxx
- Add proper directives with tooling support
2018-03-14 11:23:40 +00:00