Exports Rails assets to TypeScript as React components
Ruby TypeScript Shell
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci
__tests__
bin
lib
.gitignore
CHANGELOG.md
Gemfile
LICENSE
README.md
Rakefile
package-lock.json
package.json
ts_assets.gemspec
tsconfig.json
tslint.json

README.md

TsAssets for Rails Gem Version CircleCI

TsAssets is a code genertor to export Rails asset images to TypeScript as React components.

The motivation is that Rails asset images have hash digests in their URLs, e.g. /assets/kibela_logo-f3e74a6f5c9f46cc4e8b920cb.svg, which are not easily available from JavaScript. The gem allows it by generationg TypeScript code.

Usage

Rake Task

To use this gem, define a rake task to generate the code.

Here is an example rake task to generate a assets.tsx.

lib/tasks/ts_assets.rake:

namespace :ts_assets do
  desc "generate assets.tsx"
  task generate: :environment do
    TS_ASSETS_FILENAME = "client/generated/assets.tsx"
    tscode = TsAssets.generate(include: "app/assets/images")
    File.write(TS_ASSETS_FILENAME, tscode)
  end
end

For example, if you have app/assets/images/svg/ruby-icon.svg in your asset path, the generated source would be like this:

client/generated/assets.tsx:

/** svg/ruby-icon.svg */
const PATH_SVG_RUBY_ICON = "/assets/svg/ruby-icon-486fbe77b2fa5354.svg";

/** svg/ruby-icon */
export function ImageSvgRubyIcon(props: React.HTMLProps<HTMLImageElement>) {
    return <img alt="ruby-icon"
                width={128}
                height={128}
                src={PATH_SVG_RUBY_ICON}
                srcSet={`${PATH_SVG_RUBY_ICON} 1x`}
                {...props}
                />;
}

Then you can import client/generated/assets.tsx and use the components.

client/components/MyComponent.tsx:

import * as React from 'react';
import { ImageSvgRubyIcon } from './generated/assets';

class MyComponent extends React.Component<any, any> {
  render() {
    return (
      <ImageSvgRubyIcon
        alt='ruby'
        className='svg icon'
      />
    );
  }
}

Options

All you need to do is to call TsAssets.generate class method with supported options.

Currently supported options are:

  • include: the path to the assets. e.g.) "app/assets/images"

React Components

width, height

The width and height attribute is automatically set via https://github.com/sdsykes/fastimage gem.

srcSet

If you have files named like *@1x.png or *@2x.png, the srcSet attribute will be automatically set.

For example, if there are those images in your include path:

app/assets/images
  /webhook
    slack_icon@1x.png
    slack_icon@2x.png

Then the generated components looks like:

/** webhook/slack_icon@1x.png */
const PATH_WEBHOOK_SLACK_ICON_1X = "/assets/webhook/slack_icon@1x-dd316f78fb005e28fb960482.png";

/** webhook/slack_icon@2x.png */
const PATH_WEBHOOK_SLACK_ICON_2X = "/assets/webhook/slack_icon@2x-4f5daeae796f89bb5590bae2.png";

/** webhook/slack_icon */
export function ImageWebhookSlackIcon(props: React.HTMLProps<HTMLImageElement>) {
    return <img alt="slack_icon"
                width={20}
                src={PATH_WEBHOOK_SLACK_ICON_1X}
                srcSet={`${PATH_WEBHOOK_SLACK_ICON_1X} 1x,${PATH_WEBHOOK_SLACK_ICON_2X} 2x`}
                {...props}
                />;
}

Installation

Add this line to your application's Gemfile:

gem 'ts_assets'

And then execute:

$ bundle

Or install it yourself as:

$ gem install ts_assets

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake test to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/bitjourney/ts_assets-rails.

Copyright and Licenses

Copyright 2017 Bit Journey, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.