lingceng (科科巨无霸)

项目中使用 Rails7 importmap 的体验

lingceng — Sun, 03 Dec 2023 18:50:26 +0800

前言

最近用 Rails7 + hotwire + importmap 的技术站做了个 AI 站，下图中标黄的都是有较多异步交互的地方，项目中基本没有使用手动 Ajax 与 JSON 交互，仅使用 turbo_frame、turbo_stream 来完成交互。

这里重点说说最新的 importmap 的使用问题，也欢迎大家体验下 kittyai.cn

Importmap 的基本用法

importmap.rb 示例

下面是我的 config/imortmap.rb 部分内容，前面部分是脚手架生成的 hotwire 等库的配置。

这里 controller 目录里的文件是可以动态加载的，例如 HTML 中有某个 data-controller="message"，才会加载 message_controller.js 文件。

额外引入了 highlight.js 的高亮配置，注意 importmap 是可以配置目录的。这里也发挥了其按需加载的优势，用到什么语言才加载什么语言的高亮代码。

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.1/dist/stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/utils", under: "utils"

# For markdown preview
# https://jspm-packages.deno.dev/package/markdown-it@13.0.1
pin "markdown-it", to: "https://ga.jspm.io/npm:markdown-it@13.0.1/dist/markdown-it.js"

# For code syntax highlight
# 这里使用了路径 import https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
pin "highlight.js/", to: "https://ga.jspm.io/npm:highlight.js@11.9.0/"

开启 HTTPS

另外注意需要开启 HTTP2，能提升多文件加载的效率，例如在 Nginx 要这样配置：

server {
  listen 443 ssl http2
}

逻辑动态 import

除了可以通过静态的 import 来加载依赖，代码中甚至可以动态 import()，例如

import('highlight.js/lib/languages/' + language + ".js").then((module) => {
  hljs.registerLanguage(language, module.default)
  hljs.highlightElement(codeElement)
}).catch(err => {
  console.warn("highlight error", err)
})

遇到的问题

有些库对 ES Module 支持得不好

Javascript 的库一般会说用 npm install 等来安装，会依赖 window.process 里的环境变量，所以直接在 Web 端引入会报错。

例如 tippy.js 这个库，我是在 HTML 中加了下面的代码来 Fix:

<script type="application/javascript">
  // Fix tippy ESM bug. https://github.com/atomiks/tippyjs/issues/990
  window.process = { env: { NODE_ENV: 'production' }}
</script>

Importmap 不会管理 CSS

虽然 JS 可以通过 import 来动态还需加载了，写得很顺滑，但 CSS 并不会。

还是 tippy.js 的例子，需要在 HTML 中额外配置 CSS 依赖

<link rel="stylesheet" href="https://ga.jspm.io/npm:tippy.js@6.3.6/dist/tippy.css">

总结

所以要不要用 importmap 还是需要谨慎。它的优势是细粒度、动态的加载 JS，但其普及度还不是很高，所以容易遇到细节问题。如果要考虑低版本浏览器，importmap 的加载性能和引入的代码的兼容性都可能是问题。

Rails 项目连接第二个数据库小结

lingceng — Mon, 14 May 2018 17:54:20 +0800

Rails 项目连接第二个数据库小结

业务需要，Rails 项目需要接入第二个数据库，这里记录一些适配的细节。
环境：Rails 4.2.5 Ruby2.3.0 Mysql5.7.10

不同的 DB 配置

在 config/database.yml 添加第二个数据库的配置，添加环境做后缀，这样方便测试和上线。

data_source_development: &data_default
  adapter: mysql2
  encoding: utf8mb4
  reconnect: true
  database: data_source_development
  pool: 5
  username: root
  password: password
  host: localhost

data_source_test:
  <<: *data_default
  database: data_source_test

data_source_production:
  <<: *data_default
  database: data_source_production

创建一个继承自 ActiveRecord::Base 的类，设置为 abstract_class

class DataRecord < ActiveRecord::Base
  self.abstract_class = true
  establish_connection("data_source_#{Rails.env}".to_sym)
end

不按约定的表名

Rails 里表名需要是类名称下划线形式的复数，我接入的第二个数据库全是单数，还有前缀。例如 Data::Player 需要对应到 data_player 表。需要做下面的配置：

class DataRecord < ActiveRecord::Base
  self.abstract_class = true
  # New added
  self.table_name_prefix = "data_"
  # New added
  self.pluralize_table_names = false
  establish_connection("data_source_#{Rails.env}".to_sym)
end

如果没有规律，可以通过self.table_name = 'table_name'来设置表名。

不同的 updated_at 或者 created_at

第二个数据库不是用 updated_at 来表示更新时间，而是用 last_updated，可以通过重写下面的方法设置：

def timestamp_attributes_for_update
  [:last_updated]
end

创建时间用 timestamp_attributes_for_create

存储的时间使用不同的时区

Rails 在存储和获取 datatime 时会根据配置做转换，当前的配置是存储 utc，显示北京时区。

config.time_zone = 'Beijing'
config.active_record.default_timezone = :utc

第二个数据库存储的是北京时间，所以需要处理第二个数据库的时区转换。 Rails 不能对时区做局部配置，所以处理麻烦一些，我使用的是在写入时 +8，读取时 -8。例如

def start_time
  attributes['start_time'] && (attributes['start_time'] - 8.hour)
end

def start_time=(value)
   converted = if value.present?
                 (value.is_a?(String) ? Time.zone.parse(value) : value) + 8.hour
               else
                 value
               end
   super(attr, converted)
end

当然这样每一个 model 重写有点麻烦，所以用了个Concern，检查并重写所有 datetime 类型字段。

bit 表达 boolean

Rails 里的 boolean 类型在 MySQL 里用tynyint(1)，接入的第二个数据库是用的bit(1)。我用了下面的方式做转换。

def hidden
  read_attribute(:hidden) == "\x01"
end

def hidden=(value)
  write_attribute(:hidden, ActiveRecord::Type::Boolean.new.type_cast_from_user(value).presence && "\x01")
end

其他

时区的转换有些繁琐，希望能找到更简洁的办法。

关于 Rails 里的 render 方法

lingceng — Fri, 23 Mar 2018 08:37:22 +0800

官方文档里有两个地方提到 render 的用法在 Controller 里，http://guides.rubyonrails.org/layouts_and_rendering.html#using-render，例如

render :edit
render plain: "OK"
render json: @product

在 View 里，http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials，例如

<%= render "shared/menu" %>
<%= render partial: "form", locals: {zone: @zone} %>

看到这里，render 的日常使用就差不多了。但我们还想找找 render 更多细致的用法，于是去查 API，找到很多 render 的定义。有点混乱，也没有一个说明了render json: @product这样的用法。

于是有了些疑问：

Controller 里的 render 在哪儿定义的？具体有哪些参数？
render json: @product这样的用法在哪儿实现的？
View 的 render 在哪儿定义的？

带着这样疑问，通过代码调试，结合源码，找到了些答案。

Controller 里的 render 定义应该在 AbstractController::Rendering#render。这里"定义"有点不准确，因为往往有多次重载，姑且理解为"主要方法"的意思。

这里的 render 其实是通过 render_to_body 这个方式实现的，render_to_body 是个 API 方法，主要实现在 ActionController::Renderers。在 ActionController::Renderers 里有 add 的类方法，可以添加 Mine 类型的支持，文档里的例子是定制"render csv: @csvable"。 ActionController::Renders 源码里就有 json, js, xml 的 Mine 类型的支持的实现。这里摘抄一段 js 的：

add :js do |js, options|
  self.content_type ||= Mime::JS
  js.respond_to?(:to_js) ? js.to_js(options) : js
end

这样就回答问题 2："render json: @product" 是在 ActionController::Renderers 里实现的。

但 ActionController::Renderers 里并没有render "index"这样的用法实现。跟踪发现，ActionCtroller::Base included ActionView::Layouts which included ActionView::Rendering。 ActionView::Rendering#render_to_body uses ActionView::Renderer#render. ActionView::Renderer#render的文档里有说明，它会根据条件判断使用TemplateRender或者PartialRenderer渲染。 PartialRenderer 类有比较详细的文档，TemplateRender 的类没什么文档，它的说明主要在下面提到的 ActionView::Helpers::RenderingHelper#render。

这里是很奇妙的一点，Controller 的模版渲染实现其实是通过 View 里面的 Renderer 实现的。 不过想来也可以理解，View 层本来就负责对模版文件做渲染。那么我们可以推测，在 controller 里我们其实也可以这样使用render partial: 'shared/menu'。我测试了下，的确可以。

至于问题3，相对简单些：在ActionView::Helpers::RenderingHelper#render定义的。 这个 Helper 方法还顺便提供了两个很有意思的功能。

一是 partial 可以当作 layout 来使用，

<%= render layout: 'shared/menu' do %>
  <p>Content</p>
<% end %>

二是在 View 层可以简化 partial 的用法

<%= render partial: "form", locals: {zone: @zone} %>

<%# 可简化为 %>
<%= render "form", zone: @zone %>

那么简单总结下：

查View的render的用法，主要查ActionView::Helpers::RenderingHelper#render和PartialRenderer的文档。
查 Controller 的 render 的用法，比 View 里的多了 ActionController::Renderers 的功能。

做为一个 Ruby 开发，如何持续学习

lingceng — Fri, 22 Jan 2016 09:42:14 +0800

学会翻墙，用好 google，然后我们再说后面的事。总结的不多，经验尚浅。

Keep up with news

rubyweekly
rubyinside
rubynews
reddit/r/ruby
reddit/r/rails

Know the persons

Persons in ruby community are kind.
They do speeches, write blogs and publish books.
Follow them on twitter to get news about them. Add their blogs to RSS reader.

Aaron Patterson
DHH
Dave Tomas https://en.wikipedia.org/wiki/Dave_Thomas_programmer)(
http://blog.arkency.com/
https://github.com/orgs/rails/people
Github search with: language:Ruby followers:>300

Involve in

Read the source code of projects
Report issues and fix bugs
Maintain your open source project
Share by blogs, speeches and books

http://lingceng.github.io/blog/2016/01/22/keep-learning-as-a-ruby-programmer/

用 ransack 做日期范围查询

lingceng — Mon, 28 Dec 2015 21:52:50 +0800

我定制了两个 ransack predicates，让查询日期范围更好用。其实就是让结束日期取那一天的 59:59 分

代码如下：

# Custom ransack predicate to simplify query for date range
#
# See lib/ransack.rb in ransack gem
# See wiki https://github.com/activerecord-hackery/ransack/wiki/Custom-Predicates
Ransack.configure do |config|

  config.add_predicate 'beginning_of_day_gteq',
    arel_predicate: 'gteq',
    formatter: proc { |v| v.to_date.beginning_of_day },
    validator: proc { |v| v.present? },
    type: :string

  config.add_predicate 'end_of_day_lt',
    arel_predicate: 'lt',
    formatter: proc { |v| v.to_date.end_of_day },
    validator: proc { |v| v.present? },
    type: :string
end

全文见： http://lingceng.github.io/blog/2015/12/28/query-date-range-with-ransack/?from=ruby-china.org

重用页面的表格做 �CSV 导出

lingceng — Wed, 23 Dec 2015 20:46:46 +0800

rails 做 csv 导出挺容易的，只是大部分还是要组装二维数组。我想直接抓取页面的表格做导出，这样页面显示时的一些转换也可以重用了。

代码如下：

def generate_csv_data(template = nil)
  template ||= "#{controller_name}/#{action_name}.html.slim"
  content = render_to_string(template)
  doc =  Nokogiri::HTML(content)

  table =  doc.at_css('table')
  data = table.css('tr').map do |r|
    r.css('td,th').map(&:text).to_csv
  end.join

  # Convert from utf8 to gbk to make it compatible with Windows Office Excel
  # And Mac number can work with GBK too
  data = data.encode('GBK', undef: :replace, replace: "")
end

全文在这里 http://lingceng.github.io/blog/2015/12/23/export-csv-or-excel-by-re-using-existing-html-view/

在 Vim 或者命令行查单词 bing_dictionary

lingceng — Tue, 23 Dec 2014 14:26:18 +0800

Bing Command Dictionry 这是一个 ruby 脚本，用来在命令行中直接查询单词含义，免去打开软件或浏览器的麻烦。

配合 vim 使用：

nnoremap <leader>d :!dict <cword><CR>
vnoremap <leader>d y:!dict <c-r>"<CR>

https://github.com/lingceng/bing_dictionary

ruby 写的代码克隆工具-CloneCode

lingceng — Wed, 15 May 2013 10:13:40 +0800

CloneCode 可以快速地搬代码，下面是个例子，工具可以进行批量操作，包括文件目录的复制。

source HelloWorld.java

public class HelloWorld { public static void main(String[] args) { System.out.println("Hello, I'm HelloWorld"); String helloWorld = "HELLOWORLD"; System.out.println(helloWorld);
} }

Run commnad ruby cc.rb -f HelloWorld -t WellDone -d 'doc/*.java', replace HelloWorld to WellDone

do with [doc/HelloWorld.java] replace [doc/HelloWorld.java] to file [doc/WellDone.java]

result WellDone.java

public class WellDone { public static void main(String[] args) { System.out.println("Hello, I'm WellDone"); String wellDone = "WELLDONE"; System.out.println(wellDone);
} }

GitHub Repo:https://github.com/lingceng/clone-code