Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bitjourney/ts_assets-rails
Exports Rails assets to TypeScript as React components
https://github.com/bitjourney/ts_assets-rails
rails rails-assets react typescript
Last synced: about 1 month ago
JSON representation
Exports Rails assets to TypeScript as React components
- Host: GitHub
- URL: https://github.com/bitjourney/ts_assets-rails
- Owner: bitjourney
- License: apache-2.0
- Archived: true
- Created: 2017-07-03T05:34:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-21T07:16:35.000Z (8 months ago)
- Last Synced: 2024-09-26T03:50:11.225Z (about 1 month ago)
- Topics: rails, rails-assets, react, typescript
- Language: Ruby
- Homepage: https://rubygems.org/gems/ts_assets
- Size: 519 KB
- Stars: 5
- Watchers: 10
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# TsAssets for Rails [](https://badge.fury.io/rb/ts_assets) [](https://circleci.com/gh/bitjourney/ts_assets-rails)
> [!WARNING]
> This library is no longer maintained.
`TsAssets` is a code generator 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 generating 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`:
```ruby
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`:
```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) {
return 
;
}
```
Then you can import `client/generated/assets.tsx` and use the components.
`client/components/MyComponent.tsx`:
```tsx
import * as React from 'react';
import { ImageSvgRubyIcon } from './generated/assets';
class MyComponent extends React.Component {
render() {
return (
);
}
}
```
### 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
[email protected]
[email protected]
```
Then the generated components looks like:
```tsx
/** webhook/[email protected] */
const PATH_WEBHOOK_SLACK_ICON_1X = "/assets/webhook/[email protected]";
/** webhook/[email protected] */
const PATH_WEBHOOK_SLACK_ICON_2X = "/assets/webhook/[email protected]";
/** webhook/slack_icon */
export function ImageWebhookSlackIcon(props: React.HTMLProps) {
return 
;
}
```
## Installation
Add this line to your application's Gemfile:
```ruby
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](https://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.