From 066a1b07abd4aa951aadaeb1b001f9e41d96d702 Mon Sep 17 00:00:00 2001
From: psmir <psmir777@gmail.com>
Date: Tue, 8 Jan 2019 13:01:46 +0300
Subject: [PATCH] Update hyper-component.md

Add the Webpack Images Importing section
---
 docs/dsl-client/hyper-component.md | 56 ++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/docs/dsl-client/hyper-component.md b/docs/dsl-client/hyper-component.md
index 4362f020e..b656494bc 100644
--- a/docs/dsl-client/hyper-component.md
+++ b/docs/dsl-client/hyper-component.md
@@ -1322,6 +1322,62 @@ end
 
 Note that the `rename` directive can be used to rename both components and sublibraries, giving you full control over the ruby names of the components and libraries.
 
+### Importing Webpack Images
+
+If you store your images in app/javascript/images directory and want to display them in components, please add the following code to app/javascript/packs/application.js
+
+```javascript
+var webpackImagesMap = {};
+var imagesContext = require.context('../images/', true, /\.(gif|jpg|png|svg)$/i);
+
+function importAll (r) {
+  r.keys().forEach(key => webpackImagesMap[key] = r(key));
+}
+
+importAll(imagesContext);
+
+global.webpackImagesMap = webpackImagesMap;
+```
+
+The above code creates an images map and stores it in webpackImagesMap variable. It looks something like this
+
+```javascript
+{
+     "./logo.png": "/packs/images/logo-3e11ad2e3d31a175aec7bb2f20a7e742.png",
+     ...
+}
+```
+Add the following helper
+
+```ruby
+# app/hyperstack/helpers/images_import.rb
+
+module ImagesImport
+  def img_src(filepath)
+    img_map = Native(`webpackImagesMap`) 
+    img_map["./#{filepath}"]
+  end
+end
+```
+
+Include it into HyperComponent
+
+```ruby
+require 'helpers/images_import'
+class HyperComponent
+  ...
+  include ImagesImport
+end
+```
+
+After that you will be able to display the images in your components like this
+
+```ruby
+IMG(src: img_src('logo.png'))               # app/javascript/images/logo.png
+IMG(src: img_src('landing/some_image.png')) # app/javascript/images/landing/some_image.png
+```
+
+
 ### Auto Import
 
 If you use a lot of libraries and are using a Javascript tool chain with Webpack, having to import the libraries in both Hyperstack and Webpack is redundant and just hard work.