Customize the react:component generator
This commit is contained in:
Eric
Eric Schultz
parent
6dfaf27f2e
commit
5af6cfb865
2 changed files with 288 additions and 0 deletions
251
gems/bess/lib/generators/react/component_generator.rb
Normal file
251
gems/bess/lib/generators/react/component_generator.rb
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
# License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
|
||||
# Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE
|
||||
# from: https://github.com/reactjs/react-rails/blob/master/lib/generators/react/component_generator.rb
|
||||
module React
|
||||
module Generators
|
||||
class ComponentGenerator < ::Rails::Generators::NamedBase
|
||||
source_root File.expand_path '../../templates', __FILE__
|
||||
desc <<-DESC.strip_heredoc
|
||||
Description:
|
||||
Scaffold a React component into `components/` of your Webpacker source or asset pipeline.
|
||||
The generated component will include a basic render function and a PropTypes
|
||||
hash to help with development.
|
||||
Available field types:
|
||||
Basic prop types do not take any additional arguments. If you do not specify
|
||||
a prop type, the generic node will be used. The basic types available are:
|
||||
any
|
||||
array
|
||||
bool
|
||||
element
|
||||
func
|
||||
number
|
||||
object
|
||||
node
|
||||
shape
|
||||
string
|
||||
Special PropTypes take additional arguments in {}, and must be enclosed in
|
||||
single quotes to keep bash from expanding the arguments in {}.
|
||||
instanceOf
|
||||
takes an optional class name in the form of {className}
|
||||
oneOf
|
||||
behaves like an enum, and takes an optional list of strings that will
|
||||
be allowed in the form of 'name:oneOf{one,two,three}'.
|
||||
oneOfType.
|
||||
oneOfType takes an optional list of react and custom types in the form of
|
||||
'model:oneOfType{string,number,OtherType}'
|
||||
Examples:
|
||||
rails g react:component person name
|
||||
rails g react:component restaurant name:string rating:number owner:instanceOf{Person}
|
||||
rails g react:component food 'kind:oneOf{meat,cheese,vegetable}'
|
||||
rails g react:component events 'location:oneOfType{string,Restaurant}'
|
||||
DESC
|
||||
|
||||
argument :attributes,
|
||||
:type => :array,
|
||||
:default => [],
|
||||
:banner => 'field[:type] field[:type] ...'
|
||||
|
||||
class_option :ts,
|
||||
type: :boolean,
|
||||
default: true,
|
||||
desc: 'Output tsx class based component'
|
||||
|
||||
REACT_PROP_TYPES = {
|
||||
'node' => 'PropTypes.node',
|
||||
'bool' => 'PropTypes.bool',
|
||||
'boolean' => 'PropTypes.bool',
|
||||
'string' => 'PropTypes.string',
|
||||
'number' => 'PropTypes.number',
|
||||
'object' => 'PropTypes.object',
|
||||
'array' => 'PropTypes.array',
|
||||
'shape' => 'PropTypes.shape({})',
|
||||
'element' => 'PropTypes.element',
|
||||
'func' => 'PropTypes.func',
|
||||
'function' => 'PropTypes.func',
|
||||
'any' => 'PropTypes.any',
|
||||
|
||||
'instanceOf' => ->(type) {
|
||||
'PropTypes.instanceOf(%s)' % type.to_s.camelize
|
||||
},
|
||||
|
||||
'oneOf' => ->(*options) {
|
||||
enums = options.map{ |k| "'#{k.to_s}'" }.join(',')
|
||||
'PropTypes.oneOf([%s])' % enums
|
||||
},
|
||||
|
||||
'oneOfType' => ->(*options) {
|
||||
types = options.map{ |k| "#{lookup(k.to_s, k.to_s)}" }.join(',')
|
||||
'PropTypes.oneOfType([%s])' % types
|
||||
}
|
||||
}
|
||||
|
||||
TYPESCRIPT_TYPES = {
|
||||
'node' => 'React.ReactNode',
|
||||
'bool' => 'boolean',
|
||||
'boolean' => 'boolean',
|
||||
'string' => 'string',
|
||||
'number' => 'number',
|
||||
'object' => 'object',
|
||||
'array' => 'Array<any>',
|
||||
'shape' => 'object',
|
||||
'element' => 'object',
|
||||
'func' => 'object',
|
||||
'function' => 'object',
|
||||
'any' => 'any',
|
||||
|
||||
'instanceOf' => ->(type) {
|
||||
type.to_s.camelize
|
||||
},
|
||||
|
||||
'oneOf' => ->(*opts) {
|
||||
opts.map{ |k| "'#{k.to_s}'" }.join(" | ")
|
||||
},
|
||||
|
||||
'oneOfType' => ->(*opts) {
|
||||
opts.map{ |k| "#{ts_lookup(k.to_s, k.to_s)}" }.join(" | ")
|
||||
}
|
||||
}
|
||||
|
||||
def create_component_file
|
||||
template_extension = if options[:coffee]
|
||||
'js.jsx.coffee'
|
||||
elsif options[:ts]
|
||||
'js.jsx.tsx'
|
||||
elsif options[:es6] || webpacker?
|
||||
'es6.jsx'
|
||||
else
|
||||
'js.jsx'
|
||||
end
|
||||
|
||||
# Prefer webpacker to sprockets:
|
||||
if webpacker?
|
||||
new_file_name = file_name.camelize
|
||||
extension = if options[:coffee]
|
||||
'coffee'
|
||||
elsif options[:ts]
|
||||
'tsx'
|
||||
else
|
||||
'js'
|
||||
end
|
||||
target_dir = webpack_configuration.source_path
|
||||
.join('components')
|
||||
.relative_path_from(::Rails.root)
|
||||
.to_s
|
||||
else
|
||||
new_file_name = file_name
|
||||
extension = template_extension
|
||||
target_dir = 'app/assets/javascripts/components'
|
||||
end
|
||||
|
||||
file_path = File.join(target_dir, class_path, "#{new_file_name}.#{extension}")
|
||||
template("component.#{template_extension}", file_path)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def webpack_configuration
|
||||
Webpacker.respond_to?(:config) ? Webpacker.config : Webpacker::Configuration
|
||||
end
|
||||
|
||||
def component_name
|
||||
file_name.camelize
|
||||
end
|
||||
|
||||
def file_header
|
||||
if webpacker?
|
||||
return %|import * as React from "react"\n| if options[:ts]
|
||||
%|import React from "react"\nimport PropTypes from "prop-types"\n|
|
||||
else
|
||||
''
|
||||
end
|
||||
end
|
||||
|
||||
def file_footer
|
||||
if webpacker?
|
||||
%|export default #{component_name}|
|
||||
else
|
||||
''
|
||||
end
|
||||
end
|
||||
|
||||
def webpacker?
|
||||
defined?(Webpacker)
|
||||
end
|
||||
|
||||
def parse_attributes!
|
||||
self.attributes = (attributes || []).map do |attr|
|
||||
name = ''
|
||||
type = ''
|
||||
args = ''
|
||||
args_regex = /(?<args>{.*})/
|
||||
|
||||
name, type = attr.split(':')
|
||||
|
||||
if matchdata = args_regex.match(type)
|
||||
args = matchdata[:args]
|
||||
type = type.gsub(args_regex, '')
|
||||
end
|
||||
|
||||
if options[:ts]
|
||||
{ :name => name, :type => ts_lookup(name, type, args), :union => union?(args) }
|
||||
else
|
||||
{ :name => name, :type => lookup(type, args) }
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def union?(args = '')
|
||||
return args.to_s.gsub(/[{}]/, '').split(',').count > 1
|
||||
end
|
||||
|
||||
def self.ts_lookup(name, type = 'node', args = '')
|
||||
ts_type = TYPESCRIPT_TYPES[type]
|
||||
if ts_type.blank?
|
||||
if type =~ /^[[:upper:]]/
|
||||
ts_type = TYPESCRIPT_TYPES['instanceOf']
|
||||
else
|
||||
ts_type = TYPESCRIPT_TYPES['node']
|
||||
end
|
||||
end
|
||||
|
||||
args = args.to_s.gsub(/[{}]/, '').split(',')
|
||||
|
||||
if ts_type.respond_to? :call
|
||||
if args.blank?
|
||||
return ts_type.call(type)
|
||||
end
|
||||
|
||||
ts_type = ts_type.call(*args)
|
||||
end
|
||||
|
||||
ts_type
|
||||
end
|
||||
|
||||
def ts_lookup(name, type = 'node', args = '')
|
||||
self.class.ts_lookup(name, type, args)
|
||||
end
|
||||
|
||||
def self.lookup(type = 'node', options = '')
|
||||
react_prop_type = REACT_PROP_TYPES[type]
|
||||
if react_prop_type.blank?
|
||||
if type =~ /^[[:upper:]]/
|
||||
react_prop_type = REACT_PROP_TYPES['instanceOf']
|
||||
else
|
||||
react_prop_type = REACT_PROP_TYPES['node']
|
||||
end
|
||||
end
|
||||
|
||||
options = options.to_s.gsub(/[{}]/, '').split(',')
|
||||
|
||||
react_prop_type = react_prop_type.call(*options) if react_prop_type.respond_to? :call
|
||||
react_prop_type
|
||||
end
|
||||
|
||||
def lookup(type = 'node', options = '')
|
||||
self.class.lookup(type, options)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
37
gems/bess/lib/generators/templates/component.js.jsx.tsx
Normal file
37
gems/bess/lib/generators/templates/component.js.jsx.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<% # License: LGPL-3.0-or-later
|
||||
# Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE
|
||||
# from: https://github.com/reactjs/react-rails/blob/master/lib/generators/templates/component.js.jsx.tsx
|
||||
%>
|
||||
// License: LGPL-3.0-or-later
|
||||
<%= file_header %>
|
||||
<% unions = attributes.select{ |a| a[:union] } -%>
|
||||
<% if unions.size > 0 -%>
|
||||
<% unions.each do |e| -%>
|
||||
type <%= e[:name].titleize %> = <%= e[:type]%>
|
||||
<% end -%>
|
||||
<% end -%>
|
||||
|
||||
interface I<%= component_name %>Props {
|
||||
<% if attributes.size > 0 -%>
|
||||
<% attributes.each do | attribute | -%>
|
||||
<% if attribute[:union] -%>
|
||||
<%= attribute[:name].camelize(:lower) %>: <%= attribute[:name].titleize %>;
|
||||
<% else -%>
|
||||
<%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %>;
|
||||
<% end -%>
|
||||
<% end -%>
|
||||
<% end -%>
|
||||
}
|
||||
|
||||
|
||||
function <%= component_name %>(props:I<%= component_name %>Props) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<% attributes.each do |attribute| -%>
|
||||
<%= attribute[:name].titleize %>: {props.<%= attribute[:name].camelize(:lower) %>}
|
||||
<% end -%>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
<%= file_footer %>
|
||||
Loading…
Reference in a new issue